/* ============================================================================ * PRISM theme — Blair TCG Tracker * * PRISM is a darker, flatter, more restrained sibling of Holofoil. It loads on * TOP of theme-holofoil.css (which supplies the structural layout for the neon * themes) and then: * 1. Overrides the --holo-* tokens with PRISM's palette, AND * 2. Re-skins the surfaces that diverge from Holofoil — replacing the * holographic glass tiles, iridescent shimmer wash, rainbow wordmark and * floating mascot with flat near-black panels, a gold all-caps logotype, * mono numerals and sparing neon. * * Optional, NON-default theme. See docs/PRISM_THEME.md. * Requires the theme-holofoil.css gate broadened to also match * [data-theme="prism"] (one find/replace — see the doc). * ========================================================================== */ /* ── 1. Token palette ─────────────────────────────────────────────────────── */ [data-theme="prism"] { --holo-bg-1: #0A0712; /* near-black violet — far darker than Holofoil */ --holo-bg-2: #0C0817; --holo-bg-3: #0E0A1E; --prism-surface: #140E22; /* flat panel/tile fill */ --holo-ink: #F4F1FB; --holo-ink-dim: rgba(244, 241, 251, 0.65); --holo-ink-faint: rgba(244, 241, 251, 0.40); --holo-line: rgba(182, 140, 255, 0.16); --holo-line-strong: rgba(182, 140, 255, 0.34); --holo-violet: #B68CFF; --holo-pink: #FF7AB6; --holo-cyan: #5BD9E6; --holo-lime: #C9F25C; --holo-accent: var(--holo-violet); --holo-accent-2: var(--holo-pink); --holo-accent-success: var(--holo-lime); --holo-accent-info: var(--holo-cyan); --holo-glow-violet: rgba(182, 140, 255, 0.40); --holo-glow-pink: rgba(255, 122, 182, 0.40); --holo-glow-lime: rgba(201, 242, 92, 0.40); /* Brand gold + a gold-led gradient for the wordmark (h1). */ --prism-gold: #FFCF5A; --holo-rainbow: linear-gradient(100deg,#FFE08A 0%,#FF8FB1 28%,#B68CFF 52%,#5BD9E6 76%,#FFE08A 100%); --prism-mono: ui-monospace,'SF Mono','SFMono-Regular',Menlo,Consolas,monospace; --prism-sans: -apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Segoe UI','Helvetica Neue',Arial,sans-serif; } /* ── 2. Type — smooth system sans for UI, mono for every numeral ──────────── */ [data-theme="prism"] body, [data-theme="prism"] button, [data-theme="prism"] input, [data-theme="prism"] select, [data-theme="prism"] textarea { font-family: var(--prism-sans); } [data-theme="prism"] .block-btn-stats, [data-theme="prism"] .block-btn-fraction, [data-theme="prism"] .block-btn-percent, [data-theme="prism"] .block-btn-meta, [data-theme="prism"] .set-btn-stats, [data-theme="prism"] .set-release-date, [data-theme="prism"] .set-header-meta, [data-theme="prism"] .set-header-progress-stats, [data-theme="prism"] .set-header-progress-pct, [data-theme="prism"] .set-header-progress-frac, [data-theme="prism"] .graded-summary-progress-stats, [data-theme="prism"] .graded-summary-progress-pct, [data-theme="prism"] .card-num, [data-theme="prism"] .card-number, [data-theme="prism"] .price, [data-theme="prism"] .card-price, [data-theme="prism"] .price-tag, [data-theme="prism"] .sync-status { font-family: var(--prism-mono); font-variant-numeric: tabular-nums; } /* ── 3. Background — calm, near-black, a single restrained glow ───────────── */ [data-theme="prism"] body { background: radial-gradient(ellipse 100% 60% at 4% 0%, rgba(182,140,255,0.16), transparent 60%), radial-gradient(ellipse 90% 60% at 96% 8%, rgba(91,217,230,0.09), transparent 60%), linear-gradient(180deg, var(--holo-bg-1) 0%, var(--holo-bg-2) 58%, var(--holo-bg-3) 100%); background-attachment: fixed; color: var(--holo-ink); } [data-theme="prism"] body::before { background-color: var(--holo-bg-1); background-image: radial-gradient(ellipse 55% 45% at 18% 24%, rgba(182,140,255,0.18) 0%, transparent 60%), radial-gradient(ellipse 50% 42% at 84% 70%, rgba(91,217,230,0.10) 0%, transparent 62%); } /* ── 4. Header — flat dark panel; kill the iridescent shimmer wash ────────── */ [data-theme="prism"] header { background: rgba(20,14,34,0.62); border: 1px solid var(--holo-line); box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 10px 30px rgba(20,8,40,0.35); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } [data-theme="prism"] header::before { display: none !important; } /* no shimmer sweep */ /* Brand wordmark — gold all-caps logotype with a soft glow (not rainbow). */ @keyframes prism-title-glow { 0%, 100% { filter: drop-shadow(0 0 4px rgba(255,207,90,0.35)); } 50% { filter: drop-shadow(0 0 13px rgba(255,207,90,0.85)); } } [data-theme="prism"] h1 { letter-spacing: 1px; text-transform: uppercase; animation: holo-shimmer 6s linear infinite, prism-title-glow 3.2s ease-in-out infinite; will-change: background-position, filter; } [data-theme="prism"] .subtitle { color: var(--holo-ink-dim); letter-spacing: 2.6px; font-family: var(--prism-mono); } @media (prefers-reduced-motion: reduce) { [data-theme="prism"] h1 { animation: none; } } /* Drop the floating Eevee mascot on set views — PRISM stays clean. */ [data-theme="prism"] .set-section.active::after, [data-theme="prism"] #lorcana-content .set-section.active::after, [data-theme="prism"] #custom-sets-grids .set-section.active::after { display: none !important; } /* ── 5. Top tabs — quiet rail, solid violet active chip ───────────────────── */ [data-theme="prism"] .top-tabs { background: rgba(255,255,255,0.04); border: 1px solid var(--holo-line); box-shadow: none; border-radius: 12px; padding: 4px; } [data-theme="prism"] .top-tab.active { background: linear-gradient(120deg, var(--holo-violet), #7E6CF5); color: #0A0712; box-shadow: 0 0 16px var(--holo-glow-violet); } [data-theme="prism"] .top-tab-utility.active { background: linear-gradient(120deg, var(--holo-cyan), #3FB6C4); color: #06121a; box-shadow: 0 0 14px rgba(91,217,230,0.35); } /* ── 6. Panels & set-section — solid dark surface, thin hairline ──────────── */ [data-theme="prism"] .set-section.active, [data-theme="prism"] #lorcana-content .set-section.active, [data-theme="prism"] #custom-sets-grids .set-section.active { background: rgba(16,11,27,0.72); border: 1px solid var(--holo-line); box-shadow: 0 10px 36px rgba(0,0,0,0.4); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } [data-theme="prism"] .set-header { background: rgba(20,14,34,0.55); border: 1px solid var(--holo-line); box-shadow: none; } [data-theme="prism"] .set-header-name { color: var(--holo-ink); text-shadow: none; font-weight: 800; letter-spacing: -0.3px; } [data-theme="prism"] .set-header-progress-fill, [data-theme="prism"] .block-btn-progress-fill, [data-theme="prism"] .set-btn-progress-fill { background: linear-gradient(90deg, var(--holo-violet), var(--holo-cyan)); box-shadow: 0 0 8px var(--holo-glow-violet); } [data-theme="prism"] .set-header-progress-pct { color: var(--holo-violet); text-shadow: none; } /* ── 7. Block & set tiles — FLAT prism cards (no holographic glass) ───────── */ [data-theme="prism"] .block-btn, [data-theme="prism"] .set-btn { background: var(--prism-surface) !important; border: 1px solid var(--holo-line); box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset; backdrop-filter: none; -webkit-backdrop-filter: none; } [data-theme="prism"] .block-btn::before, [data-theme="prism"] .set-btn::before { display: none !important; } /* no shimmer streak */ [data-theme="prism"] .block-btn:hover, [data-theme="prism"] .set-btn:hover { transform: translateY(-2px); border-color: rgba(182,140,255,0.42); box-shadow: 0 8px 22px rgba(0,0,0,0.45); } [data-theme="prism"] .block-btn.active, [data-theme="prism"] .set-btn.active { background: linear-gradient(135deg, rgba(182,140,255,0.14), var(--prism-surface)) !important; border-color: var(--holo-violet); box-shadow: inset 0 0 0 1px var(--holo-violet), 0 0 18px var(--holo-glow-violet); } [data-theme="prism"] .block-btn-name, [data-theme="prism"] .set-btn-name { color: var(--holo-ink); } [data-theme="prism"] .block-btn-percent { color: var(--holo-violet); text-shadow: none; } /* ── 8. Card tiles — flat dark, lime = owned; no rainbow hover border ─────── */ [data-theme="prism"] .card-item { background: var(--prism-surface); border: 1px solid var(--holo-line); } [data-theme="prism"] .card-item::before { display: none !important; } [data-theme="prism"] .card-item:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,0.5); border-color: rgba(182,140,255,0.4); } [data-theme="prism"] .card-item.all-collected { border-color: rgba(201,242,92,0.34); background: linear-gradient(135deg, rgba(201,242,92,0.05), var(--prism-surface)); } [data-theme="prism"] .card-item.all-collected::after { background: var(--holo-lime); color: #0a1400; box-shadow: 0 0 10px var(--holo-glow-lime); } [data-theme="prism"] .card-num { background: rgba(8,5,18,0.8); border: 1px solid var(--holo-line-strong); color: var(--holo-violet); } /* ── 9. Rarity pills + variant boxes — quiet, solid violet active ─────────── */ [data-theme="prism"] .rarity-btn.active { background: linear-gradient(120deg, var(--holo-violet), #7E6CF5); border-color: transparent; color: #0A0712; box-shadow: 0 0 12px var(--holo-glow-violet); } [data-theme="prism"] .vbox.checked { background: linear-gradient(135deg, var(--holo-violet), var(--holo-pink)); border-color: transparent; color: #fff; box-shadow: 0 0 8px var(--holo-glow-violet); } /* ── 10. Sync pill — lime "live" dot, mono label ──────────────────────────── */ [data-theme="prism"] .sync-status { background: rgba(201,242,92,0.10); border: 1px solid rgba(201,242,92,0.30); color: var(--holo-lime); box-shadow: none; } /* Buttons / inputs focus — violet ring, cyan keyboard focus (kept from tokens) */ [data-theme="prism"] .search-input:focus { border-color: var(--holo-violet); box-shadow: 0 0 12px var(--holo-glow-violet); } /* ============================================================================ * PRISM v2 — per-story expansion zones * * Each story (S2–S8) adds its surface re-skins ONLY inside its own zone below, * so the parallel feature branches editing this single sheet merge cleanly. * Every rule MUST be scoped under [data-theme="prism"]. Do NOT broaden or touch * the theme-holofoil.css gate (the bare-comma trap white-screened prod once); * the gate is narrowed to holofoil-only in the final v2 cutover story. * ========================================================================== */ /* @prism-s2:begin — Brand wordmark + logo (§1) + page background/chrome refinements (§2) */ /* ───────────────────────────────────────────────────────────────────────────── * S2 · Brand wordmark + page chrome (CSS-only) * * Reality note: the shipped header is a single SVG wordmark banner * (Images/header/logo.svg → img.header-logo, 600×140) plus a decorative * .header-pokemon-bg layer. There is NO

and NO separate square badge * image in the header markup. So S2: * • restyles the REAL visible wordmark (.header-logo) into PRISM's restrained * brand-gold glow, * • quiets the holofoil-y header decoration that diverges from the clean mock, * • tightens §2 background to a single restrained violet corner glow, and * • ships the gold ALL-CAPS

logotype rules so they are ready the moment a * text wordmark is introduced (harmless no-op today — no

renders). * The circular gold badge needs a dedicated square asset + element, which * is out of CSS-only scope — see the deferred follow-up in the handoff. * Brand gold = --prism-gold (#FFCF5A); gold-led gradient = --holo-rainbow. * ──────────────────────────────────────────────────────────────────────────── */ /* §2 · Background — collapse the starter's multi-glow wash down to ONE restrained * violet corner glow over near-black violet (matches the mock; drops the cyan * second light that read as an iridescent wash). */ [data-theme="prism"] body { background: radial-gradient(ellipse 72% 52% at 6% -2%, rgba(182,140,255,0.15), transparent 60%), linear-gradient(180deg, var(--holo-bg-1) 0%, var(--holo-bg-2) 58%, var(--holo-bg-3) 100%); background-attachment: fixed; } [data-theme="prism"] body::before { background-color: var(--holo-bg-1); background-image: radial-gradient(ellipse 52% 44% at 14% 18%, rgba(182,140,255,0.11) 0%, transparent 64%); } /* §2 · Header chrome — drop the gold-on-navy card silhouettes, pokeball/character * confetti and sparkles. They are pure holofoil playfulness; the PRISM mock keeps * the header a clean flat dark panel (the panel skin itself is already set in the * starter's section 4). Decorative + aria-hidden, so safe to hide. */ [data-theme="prism"] .header-pokemon-bg { display: none !important; } /* §1 · Wordmark — the actual visible brand is the SVG logo banner. Replace the * base theme's bright yellow halo with PRISM's restrained brand-gold glow, then * add a soft pulse ONLY when motion is welcome (see the media query below). */ @keyframes prism-logo-glow { 0%, 100% { filter: drop-shadow(0 1px 6px rgba(0,0,0,0.5)) drop-shadow(0 0 4px rgba(255,207,90,0.30)); } 50% { filter: drop-shadow(0 1px 6px rgba(0,0,0,0.5)) drop-shadow(0 0 10px rgba(255,207,90,0.60)); } } [data-theme="prism"] .header-logo { filter: drop-shadow(0 1px 6px rgba(0,0,0,0.5)) drop-shadow(0 0 4px rgba(255,207,90,0.38)); } [data-theme="prism"] .header-logo:hover { filter: drop-shadow(0 2px 10px rgba(0,0,0,0.55)) drop-shadow(0 0 10px rgba(255,207,90,0.7)); transform: scale(1.02); } [data-theme="prism"] .logo-link:focus-visible { outline: 2px solid var(--holo-violet); outline-offset: 4px; border-radius: 10px; } /* §1 ·

logotype — gold ALL-CAPS wordmark: gold-led --holo-rainbow clipped to * the text, uppercase + letter-spacing. Ready for the (future) HTML text wordmark; * inert today since the header carries no

. */ [data-theme="prism"] h1 { text-transform: uppercase; letter-spacing: 1.5px; font-weight: 800; background: var(--holo-rainbow); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; text-shadow: none; } /* Motion — BOTH the shimmer slide and the gold glow pulse run ONLY when the user * has NOT requested reduced motion (no animation otherwise). */ @media (prefers-reduced-motion: no-preference) { [data-theme="prism"] .header-logo { animation: prism-logo-glow 3.2s ease-in-out infinite; will-change: filter; } [data-theme="prism"] h1 { animation: holo-shimmer 6s linear infinite, prism-title-glow 3.2s ease-in-out infinite; will-change: background-position, filter; } } /* @prism-s2:end */ /* @prism-s3:begin — Browse: era cards → vertical set list + utility icons (§4), logos/symbols (§5) */ /* -------------------------------------------------------------------------- * * S3 · Browse (CSS-only). Two pieces: * A. Era tiles (.block-btn) — flat near-black #140E22 card, 1px hairline, * logo + name + meta + progress + "m/n · %", no holographic glass. * B. Set rail (.set-buttons) — a VERTICAL list of tappable rows; each row is * [logo thumb] [name + "m/n (%)"] [chevron ::after]. * Every rule is scoped to [data-theme="prism"]. theme-prism.css loads AFTER * theme-holofoil.css, so equal-specificity / equal-importance ties resolve in * PRISM's favour by source order — that's why a single base !important rule * here also wins inside Holofoil's responsive `display:grid !important` media * blocks without re-declaring per breakpoint. * * DEFERRED (needs markup, out of scope for this CSS-only story): the two * utility icon-buttons (Store Hunter / Symbol Dex) in the tab header (§4). * -------------------------------------------------------------------------- */ /* ── A. Era tiles — flat prism era cards ──────────────────────────────────── */ [data-theme="prism"] .block-btn { background: var(--prism-surface) !important; border: 1px solid var(--holo-line) !important; border-radius: 13px !important; /* tokens: tiles 13px */ box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } [data-theme="prism"] .block-btn.active { background: linear-gradient(135deg, rgba(182, 140, 255, 0.16), var(--prism-surface)) !important; border-color: var(--holo-line-strong) !important; box-shadow: inset 0 0 0 1px var(--holo-violet), 0 0 18px var(--holo-glow-violet) !important; } [data-theme="prism"] .block-btn-meta { color: var(--holo-ink-faint) !important; } [data-theme="prism"] .block-btn-fraction { color: var(--holo-ink-dim) !important; } [data-theme="prism"] .block-btn-percent { color: var(--holo-violet) !important; text-shadow: none !important; } [data-theme="prism"] .block-btn-progress { background: rgba(0, 0, 0, 0.40); border-radius: 999px; overflow: hidden; } [data-theme="prism"] .block-btn-progress-fill { background: linear-gradient(90deg, var(--holo-violet), var(--holo-cyan)) !important; box-shadow: none !important; } /* ── B. Set rail → vertical list ────────────────────────────────────────── * Flip every PRISM set rail from the Holofoil grid to a single-column flex * list. Enumerated per TCG content id to match Holofoil's own selector list * (and its specificity); !important + later source order beats the grid rules * at every breakpoint. */ [data-theme="prism"] #pokemon-tcg-content .set-buttons.active, [data-theme="prism"] #lorcana-content .set-buttons, [data-theme="prism"] #mtg-content .set-buttons, [data-theme="prism"] #union-arena-content .set-buttons, [data-theme="prism"] #dragonball-content .set-buttons.active, [data-theme="prism"] #custom-sets-content .set-buttons { display: flex !important; flex-direction: column !important; grid-template-columns: none !important; gap: 7px !important; justify-content: flex-start !important; align-items: stretch !important; overflow-x: visible !important; -webkit-mask-image: none !important; mask-image: none !important; } /* Each set tile → a list row: [logo thumb] [name + stats] [chevron]. * Holofoil's per-breakpoint .set-btn child rules are NOT !important, so a * single !important rule here wins over all of them regardless of viewport. */ [data-theme="prism"] .set-buttons .set-btn { display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto !important; align-items: center !important; column-gap: 12px !important; row-gap: 1px !important; padding: 9px 12px !important; border-radius: 12px !important; text-align: left !important; min-width: unset !important; /* override the grid track min-size */ min-height: 0 !important; width: auto !important; flex: initial !important; overflow: hidden; } /* Logo framed thumb (52×38, per mock) spanning both text rows. */ [data-theme="prism"] .set-buttons .set-btn .set-btn-logo-wrapper { grid-column: 1; grid-row: 1 / span 2; align-self: center; width: 52px !important; height: 38px !important; min-width: 52px; margin: 0 !important; padding: 4px !important; border-radius: 9px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--holo-line); display: flex !important; align-items: center; justify-content: center; flex: 0 0 auto; } [data-theme="prism"] .set-buttons .set-btn .set-btn-logo { max-width: 100% !important; max-height: 100% !important; width: auto !important; height: auto !important; margin: 0 !important; } [data-theme="prism"] .set-buttons .set-btn .set-btn-name { grid-column: 2; grid-row: 1; text-align: left !important; align-self: end; margin: 0 !important; font-size: 0.82rem; font-weight: 600; line-height: 1.2; color: var(--holo-ink) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } [data-theme="prism"] .set-buttons .set-btn .set-btn-stats { grid-column: 2; grid-row: 2; text-align: left !important; align-self: start; margin: 0 !important; font-size: 0.66rem; color: var(--holo-ink-faint) !important; /* mono + tabular numerals already applied in §2 */ } /* The release date and the standalone progress bar are redundant in a list * row (the "m/n (%)" stat carries progress) — drop them, per the mock. */ [data-theme="prism"] .set-buttons .set-btn .set-release-date, [data-theme="prism"] .set-buttons .set-btn .set-btn-progress { display: none !important; } /* Chevron affordance — a CSS-drawn ">" in the trailing column. */ [data-theme="prism"] .set-buttons .set-btn::after { content: ''; grid-column: 3; grid-row: 1 / span 2; align-self: center; justify-self: center; width: 7px; height: 7px; margin-right: 2px; border-top: 2px solid var(--holo-ink-faint); border-right: 2px solid var(--holo-ink-faint); transform: rotate(45deg); transition: border-color 0.2s ease, transform 0.2s ease; pointer-events: none; } [data-theme="prism"] .set-buttons .set-btn.active::after { border-color: var(--holo-violet); } /* List rows don't lift on hover (that reads as a tile, not a row); brighten the * hairline + nudge the chevron instead. */ [data-theme="prism"] .set-buttons .set-btn:hover { transform: none !important; border-color: var(--holo-line-strong); } [data-theme="prism"] .set-buttons .set-btn:hover::after { border-color: var(--holo-ink-dim); transform: translateX(2px) rotate(45deg); } /* ── Quality floor — visible focus on the tappable rows + era tiles ───────── */ [data-theme="prism"] .set-buttons .set-btn:focus-visible, [data-theme="prism"] .block-buttons .block-btn:focus-visible { outline: 2px solid var(--holo-cyan); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { [data-theme="prism"] .set-buttons .set-btn, [data-theme="prism"] .set-buttons .set-btn::after { transition: none !important; } [data-theme="prism"] .set-buttons .set-btn:hover::after { transform: rotate(45deg); } [data-theme="prism"] .block-btn:hover, [data-theme="prism"] .set-buttons .set-btn:hover { transform: none !important; } } /* @prism-s3:end */ /* @prism-s4:begin — Collection grid (§6) + collection list / density view (§7) */ /* =========================================================================== * S4 — Collection GRID (§6) + collection LIST / density (§7) * * Scope: shared grid tile `.card-item` (Pokemon official + Custom Sets) and the * shared list renderer `.card-list-row`. Lorcana's `.card` tile keeps its base * prism look (different markup) and is intentionally NOT restructured here. * * Specificity note: the holofoil gate is `:is([data-theme="holofoil"], * [data-theme="prism"]) …` (one [data-theme] = 0,1,0). Our `[data-theme="prism"] * …` selectors match that at equal specificity and, loading later in source * order, win deterministically. State rules that override a holofoil * pseudo-element (e.g. `.card-item.all-collected::after`) repeat the full * compound so specificity stays equal and source-order still decides. * ===========================================================================*/ /* ── 6.1 Grid tile — flat #140E22, 13px radius, full-bleed portrait image ──── */ [data-theme="prism"] .card-item { background: var(--prism-surface); border: 1px solid var(--holo-line); border-radius: 13px; padding: 0; /* image bleeds to the tile edge; body re-pads */ overflow: hidden; } [data-theme="prism"] .card-item::before { display: none !important; } /* kill holo/rainbow sweep */ [data-theme="prism"] .card-item .card-img-wrapper { aspect-ratio: 63 / 88; /* mock portrait ratio */ border-radius: 0; margin-bottom: 0; background: #0e0a1a; } [data-theme="prism"] .card-item .card-header { padding: 7px 8px 0; } [data-theme="prism"] .card-item .variants-section { border-top: none; padding: 6px 8px 8px; } [data-theme="prism"] .card-item:hover { transform: translateY(-2px); border-color: rgba(182, 140, 255, 0.40); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5); } /* card name + mono number chip (number lives in the header under the image) */ [data-theme="prism"] .card-item .card-name { color: var(--holo-ink); opacity: 1; } [data-theme="prism"] .card-item .card-number { display: inline-block; margin-bottom: 3px; padding: 1px 6px; border-radius: 6px; background: rgba(8, 5, 18, 0.80); border: 1px solid var(--holo-line-strong); color: var(--holo-violet); font-weight: 600; opacity: 1; } /* quiet the bright TCGPlayer launch button so it reads as a calm prism chip */ [data-theme="prism"] .card-item .tcgplayer-link { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--holo-line); color: var(--holo-ink-dim); } [data-theme="prism"] .card-item .tcgplayer-link:hover { background: rgba(182, 140, 255, 0.16); color: var(--holo-violet); } /* market price — mono, quiet (tabular-nums already set in the §2 type block) */ [data-theme="prism"] .price-tag { background: transparent; color: var(--holo-ink-dim); font-weight: 600; padding: 1px 0; } /* ── 6.2 OWNED tile — lime border + lime ✓ over the image; no rainbow bar ──── */ [data-theme="prism"] .card-item.all-collected { border-color: rgba(201, 242, 92, 0.34); background: linear-gradient(135deg, rgba(201, 242, 92, 0.05), var(--prism-surface)); box-shadow: none; } /* drop the holofoil "✓ COMPLETE" rainbow footer bar — prism shows a corner ✓ */ [data-theme="prism"] .card-item.all-collected::after { content: none; display: none; } [data-theme="prism"] .card-item.all-collected .card-img-wrapper::after { content: "✓"; position: absolute; top: 5px; left: 5px; width: 17px; height: 17px; border-radius: 50%; background: var(--holo-lime); color: #0a1400; font-size: 11px; font-weight: 800; line-height: 1; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 10px var(--holo-glow-lime); z-index: 2; } /* ── 6.3 NEED tile (zero variants owned) — dimmed image + dashed "+" ───────── * * `:has()` keeps this off PARTIALLY-owned tiles (those keep a clean surface). */ [data-theme="prism"] .card-item:not(.all-collected):not(:has(.variant-checkbox.checked, .single-variant.checked)) { background: #100B1B; border-color: rgba(182, 140, 255, 0.10); } [data-theme="prism"] .card-item:not(.all-collected):not(:has(.variant-checkbox.checked, .single-variant.checked)) .card-name { color: var(--holo-ink-dim); } [data-theme="prism"] .card-item:not(.all-collected):not(:has(.variant-checkbox.checked, .single-variant.checked)) .card-img-wrapper img { filter: grayscale(0.85) brightness(0.5); } [data-theme="prism"] .card-item:not(.all-collected):not(:has(.variant-checkbox.checked, .single-variant.checked)) .card-img-wrapper::after { content: "+"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 24px; height: 24px; border-radius: 50%; border: 1.5px dashed rgba(244, 241, 251, 0.45); color: rgba(244, 241, 251, 0.60); font-size: 15px; font-weight: 400; line-height: 1; display: flex; align-items: center; justify-content: center; z-index: 2; } /* ── 6.4 Variant bars — gradient fill when owned, hollow when not ──────────── * * Two-up REG/RH intent: the second bar (reverse-holo in REG+RH / HOLO+RH sets) * takes the cyan→violet "RH" gradient; everything else takes violet→pink. */ [data-theme="prism"] .card-item .variant-checkboxes { gap: 4px; } [data-theme="prism"] .card-item .variant-checkbox, [data-theme="prism"] .card-item .single-variant { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--holo-line); border-radius: 6px; color: var(--holo-ink-faint); font-family: var(--prism-mono); font-weight: 700; letter-spacing: 0.3px; } [data-theme="prism"] .card-item .variant-checkbox.checked, [data-theme="prism"] .card-item .single-variant.checked { background: linear-gradient(135deg, var(--holo-violet), var(--holo-pink)); border-color: transparent; color: #fff; box-shadow: 0 0 8px var(--holo-glow-violet); } [data-theme="prism"] .card-item .variant-checkbox.checked:nth-of-type(2) { background: linear-gradient(135deg, var(--holo-cyan), var(--holo-violet)); color: #06121a; box-shadow: 0 0 8px rgba(91, 217, 230, 0.35); } /* keyboard focus on a variant control stays clearly visible */ [data-theme="prism"] .card-item .variant-checkbox:focus-within, [data-theme="prism"] .card-item .single-variant:focus-within { outline: 2px solid var(--holo-cyan); outline-offset: 1px; } /* ── 6.5 Owned-count ×N chip — violet mono (grid overlay + list inline) ────── */ [data-theme="prism"] .card-owned-badge { background: rgba(182, 140, 255, 0.16); border: 1px solid rgba(182, 140, 255, 0.40); color: var(--holo-violet); font-family: var(--prism-mono); border-radius: 7px; box-shadow: none; } /* move the grid overlay to the top-right (top-left is the lime ✓) */ [data-theme="prism"] .card-item .card-owned-badge { left: auto; right: 6px; } /* =========================================================================== * 7. Collection LIST (density) — accent bar (owned) · name · NNN·RARITY mono · * REG/RH chips · ×N · price. Columnar layout is kept (CSS-only); the 38×52 * inline row thumbnail in the mock needs a markup change → deferred. * ===========================================================================*/ /* owned row — lime left accent bar + faint lime wash */ [data-theme="prism"] .card-list-row.all-collected { background: rgba(201, 242, 92, 0.06); } [data-theme="prism"] .card-list-row.all-collected::before { width: 3px; border-radius: 0 3px 3px 0; background: var(--holo-lime); box-shadow: 0 0 8px rgba(201, 242, 92, 0.50); } /* number + rarity read as one quiet mono "NNN · RARITY" voice */ [data-theme="prism"] .card-list-row .row-num { color: var(--holo-ink-dim); font-weight: 600; } [data-theme="prism"] .card-list-row .row-name-text { color: var(--holo-ink); } [data-theme="prism"] .card-list-row .row-rarity .rarity-badge { background: transparent; color: var(--holo-ink-dim); box-shadow: none; padding: 0; font-family: var(--prism-mono); font-weight: 600; letter-spacing: 0.4px; } /* REG/RH row chips — gradient when owned, hollow when not (RH → cyan, like §6) */ [data-theme="prism"] .card-list-row .row-variant-inline { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(182, 140, 255, 0.18); border-radius: 6px; color: var(--holo-ink-faint); font-family: var(--prism-mono); font-weight: 700; } [data-theme="prism"] .card-list-row .row-variant-inline.checked { background: linear-gradient(135deg, var(--holo-violet), var(--holo-pink)); border-color: transparent; color: #fff; box-shadow: 0 0 8px var(--holo-glow-violet); } [data-theme="prism"] .card-list-row .row-variant-inline.pair:nth-of-type(2).checked { background: linear-gradient(135deg, var(--holo-cyan), var(--holo-violet)); color: #06121a; box-shadow: 0 0 8px rgba(91, 217, 230, 0.35); } [data-theme="prism"] .card-list-row .row-variant-inline:focus-within { outline: 2px solid var(--holo-cyan); outline-offset: 1px; } /* 3+ variant "X/N collected" pill */ [data-theme="prism"] .card-list-row .row-variant-pill { background: rgba(182, 140, 255, 0.16); border: 1px solid rgba(182, 140, 255, 0.30); color: var(--holo-violet); font-family: var(--prism-mono); } [data-theme="prism"] .card-list-row .row-variant-pill.full { background: rgba(201, 242, 92, 0.14); border-color: rgba(201, 242, 92, 0.40); color: var(--holo-lime); } /* NEED rows (single/pair with nothing owned) — gently dimmed, like the mock. * 3+ variant rows are excluded (their pill already shows partial counts). */ [data-theme="prism"] .card-list-row:not(.all-collected):has(.row-variant-inline):not(:has(.row-variant-inline.checked)) { opacity: 0.72; } /* @prism-s4:end */ /* @prism-s5:begin — Card detail modal restyle (§8; EXCLUDES the qty steppers, that is S10) */ /* All rules below scoped under [data-theme="prism"] and loaded AFTER * theme-holofoil.css, so they win specificity ties against the shared * :is([data-theme="holofoil"],[data-theme="prism"]) modal rules and re-skin * the card-detail modal to the flat PRISM look. Class/ID names mirror * js/modal.js + index.html exactly (#cardModal markup). */ /* ── Overlay + modal panel — flat near-black surface, hairline, soft shadow ── */ [data-theme="prism"] .card-modal { background: rgba(8, 5, 16, 0.82); } [data-theme="prism"] .card-modal-content { background: #0C0817; /* flat — no holo glass */ border: 1px solid var(--holo-line); border-radius: 18px; /* panels 16–18px */ box-shadow: 0 24px 60px rgba(20, 8, 40, 0.4); /* panel-shadow token */ color: var(--holo-ink); backdrop-filter: none; -webkit-backdrop-filter: none; } /* Close button — hairline chip, violet hover, visible keyboard focus */ [data-theme="prism"] .card-modal-close { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--holo-line); color: var(--holo-ink-dim); } [data-theme="prism"] .card-modal-close:hover { background: rgba(182, 140, 255, 0.16); color: var(--holo-violet); } [data-theme="prism"] .card-modal-close:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--holo-cyan); } /* ── Card image — restrained holo sweep + inset hairline ring ──────────────── */ [data-theme="prism"] .card-modal-image { position: relative; align-self: flex-start; border-radius: 15px; overflow: hidden; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55); } [data-theme="prism"] .card-modal-image img { display: block; border-radius: 15px; box-shadow: none; /* shadow lives on wrapper */ } /* inset hairline ring over the art (above the sweep) */ [data-theme="prism"] .card-modal-image::before { content: ""; position: absolute; inset: 0; border-radius: 15px; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.16); pointer-events: none; z-index: 2; } /* restrained diagonal holo sweep */ [data-theme="prism"] .card-modal-image::after { content: ""; position: absolute; top: -15%; left: -60%; width: 45%; height: 130%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent); transform: skewX(-8deg); pointer-events: none; z-index: 1; animation: prism-modal-holo-sweep 4.2s linear infinite; } @keyframes prism-modal-holo-sweep { 0% { left: -60%; } 62% { left: 130%; } 100% { left: 130%; } } @media (prefers-reduced-motion: reduce) { [data-theme="prism"] .card-modal-image::after { animation: none; display: none; } } /* ── Title + rarity pill — PROMO/HOLO pill (rounded, mono, pink-tinted) ─────── */ [data-theme="prism"] .card-modal-title { color: var(--holo-ink); letter-spacing: -0.3px; } [data-theme="prism"] .card-modal-rarity { border-radius: 999px; /* pills 999px */ padding: 4px 11px; background: rgba(255, 122, 182, 0.14); border: 1px solid rgba(255, 122, 182, 0.35); color: var(--holo-pink); font-family: var(--prism-mono); font-variant-numeric: tabular-nums; font-size: 0.66rem; letter-spacing: 1px; } /* ── MARKET price block — mono, flat panel, label over value ────────────────── */ [data-theme="prism"] .card-modal-price { flex-direction: column; align-items: flex-start; gap: 2px; margin-top: 14px; padding: 14px; border-radius: 16px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--holo-line); } [data-theme="prism"] .card-modal-price.na { background: rgba(255, 255, 255, 0.03); border-color: var(--holo-line); } [data-theme="prism"] .modal-price-label { font-family: var(--prism-mono); font-size: 0.62rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--holo-ink-faint); } [data-theme="prism"] .modal-price-value { font-family: var(--prism-mono); font-variant-numeric: tabular-nums; font-size: 1.4rem; font-weight: 700; color: var(--holo-ink); } [data-theme="prism"] .card-modal-price.na .modal-price-value { color: var(--holo-ink-faint); } /* NOTE (deferred → S10/JS): the mock's "▲ 12% · 30d" delta + sparkline have no * DOM/JS in the live modal (js/modal.js renders only label+value). Styling them * is deferred until that markup exists — CSS-only here cannot add them. */ /* ── // YOUR COPIES heading + summary pills ─────────────────────────────────── */ [data-theme="prism"] .card-modal-variants-title { font-family: var(--prism-mono); font-size: 0.62rem; font-weight: 700; letter-spacing: 1.5px; color: var(--holo-violet); } [data-theme="prism"] .card-modal-variants-title::before { content: "// "; /* mock's "// YOUR COPIES" marker */ color: var(--holo-violet); } /* owned-copies summary — lime mono pill ("owned: N") */ [data-theme="prism"] .card-modal-owned-badge { border-radius: 999px; padding: 3px 9px; background: rgba(201, 242, 92, 0.12); border: 1px solid rgba(201, 242, 92, 0.30); color: var(--holo-lime); font-family: var(--prism-mono); font-variant-numeric: tabular-nums; text-transform: uppercase; letter-spacing: 0.4px; box-shadow: none; } /* graded summary — cyan (info) mono pill */ [data-theme="prism"] .card-modal-graded-badge { border-radius: 999px; padding: 3px 9px; background: rgba(91, 217, 230, 0.12); border: 1px solid rgba(91, 217, 230, 0.30); color: var(--holo-cyan); font-family: var(--prism-mono); font-variant-numeric: tabular-nums; text-transform: uppercase; letter-spacing: 0.4px; box-shadow: none; } /* ── Per-variant rows — flat surface, lime when owned ──────────────────────── */ [data-theme="prism"] .card-modal-variant-item { border-radius: 13px; /* tiles 13px */ padding: 9px 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--holo-line); color: var(--holo-ink); } [data-theme="prism"] .card-modal-variant-item:hover { background: rgba(182, 140, 255, 0.08); border-color: var(--holo-line-strong); } [data-theme="prism"] .card-modal-variant-item.collected { background: linear-gradient(120deg, rgba(201, 242, 92, 0.11), rgba(20, 14, 34, 0.5)); border-color: rgba(201, 242, 92, 0.34); } [data-theme="prism"] .card-modal-variant-item label { font-weight: 600; } [data-theme="prism"] .card-modal-variant-checkbox { accent-color: var(--holo-lime); /* lime = owned */ } /* per-variant price — quiet mono, no candy background */ [data-theme="prism"] .card-modal-variant-price { background: transparent; color: var(--holo-ink-dim); font-family: var(--prism-mono); font-variant-numeric: tabular-nums; font-weight: 600; } [data-theme="prism"] .card-modal-variant-price.na { background: transparent; color: var(--holo-ink-faint); } /* ── Bulk-select row — quiet violet accent ─────────────────────────────────── */ [data-theme="prism"] .card-modal-bulk-row { color: var(--holo-ink-dim); } [data-theme="prism"] .card-modal-bulk-row .bulk-select-checkbox { accent-color: var(--holo-violet); } /* ── Quantity steppers — light token coloring only (full polish is S10) ─────── */ [data-theme="prism"] .modal-qty-btn { border: 1px solid var(--holo-line-strong); background: rgba(255, 255, 255, 0.04); color: var(--holo-ink); border-radius: 9px; } [data-theme="prism"] .modal-qty-decrement { color: var(--holo-pink); } [data-theme="prism"] .modal-qty-increment { color: var(--holo-violet); background: rgba(182, 140, 255, 0.14); border-color: rgba(182, 140, 255, 0.3); } [data-theme="prism"] .modal-qty-btn:hover { background: rgba(182, 140, 255, 0.16); border-color: var(--holo-violet); } [data-theme="prism"] .modal-qty-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--holo-cyan); } [data-theme="prism"] .modal-qty-value { color: var(--holo-ink); font-family: var(--prism-mono); font-variant-numeric: tabular-nums; } /* ── Action links — PRISM CTAs (override the default inline colors) ─────────── */ /* The links carry inline background/color in index.html, so !important is * required to retint them. Primary = violet "Save copies"-style; eBay = cyan. */ [data-theme="prism"] #modalTCGPlayerLink { background: linear-gradient(120deg, var(--holo-violet), #7E6CF5) !important; color: #0A0712 !important; border-radius: 11px !important; font-weight: 700; box-shadow: 0 8px 22px var(--holo-glow-violet); } [data-theme="prism"] #modalEbayLink, [data-theme="prism"] #modalEbaySoldLink { background: rgba(91, 217, 230, 0.08) !important; color: var(--holo-cyan) !important; border: 1px solid rgba(91, 217, 230, 0.4) !important; border-radius: 11px !important; font-weight: 700; } [data-theme="prism"] #modalTCGPlayerLink:focus-visible, [data-theme="prism"] #modalEbayLink:focus-visible, [data-theme="prism"] #modalEbaySoldLink:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--holo-cyan); } /* @prism-s5:end */ /* @prism-s6:begin — Graded tab grade-ladder (§11) + card scanner viewfinder/result (§12) */ /* ─────────────────────────────────────────────────────────────────────────── * S6 — Graded tab (§11) + Card scanner (§12). CSS-only re-skin scoped to * [data-theme="prism"]. Graded reads CYAN-led (the "info / value" accent in the * Prism palette); scanner stays quiet except for ONE signature moment — the * prism-bracket viewfinder (violet/cyan/lime/pink corners + a cyan scan-line). * Flat near-black rows + hairlines everywhere else. Mono numerals are inherited * from the token sheet (§2) for the classes it lists; the rest are set locally. * ─────────────────────────────────────────────────────────────────────────── */ /* ===== §11 GRADED TAB ====================================================== */ /* Graded panel container — quiet, no extra chrome (rides the set-section card). */ [data-theme="prism"] .set-view-graded { background: transparent; } /* — Card summary: owned / graded value, cyan-led — */ [data-theme="prism"] .graded-summary { background: linear-gradient(120deg, rgba(91,217,230,0.06), rgba(20,14,34,0.5)); border: 1px solid rgba(91,217,230,0.26); border-radius: 16px; box-shadow: 0 10px 30px rgba(20,8,40,0.34); } [data-theme="prism"] .graded-summary-title { color: var(--holo-ink); font-weight: 800; letter-spacing: -0.2px; } [data-theme="prism"] .graded-summary-copies { color: var(--holo-cyan); font-family: var(--prism-mono); font-variant-numeric: tabular-nums; background: rgba(91,217,230,0.12); border: 1px solid rgba(91,217,230,0.30); border-radius: 999px; padding: 4px 10px; font-size: 11px; font-weight: 700; } [data-theme="prism"] .graded-summary-progress-label, [data-theme="prism"] .graded-summary-value-label { color: var(--holo-ink-faint); text-transform: uppercase; letter-spacing: 0.6px; font-size: 10px; font-weight: 700; } [data-theme="prism"] .graded-summary-progress-pct { color: var(--holo-cyan); } [data-theme="prism"] .graded-summary-progress-sep, [data-theme="prism"] .graded-summary-progress-frac { color: var(--holo-ink-dim); } [data-theme="prism"] .graded-summary-progress-bar { background: rgba(8,5,18,0.7); border: 1px solid var(--holo-line); border-radius: 999px; overflow: hidden; } [data-theme="prism"] .graded-summary-progress-fill { background: linear-gradient(90deg, var(--holo-cyan), var(--holo-violet)); box-shadow: 0 0 8px rgba(91,217,230,0.4); } [data-theme="prism"] .graded-summary-value-amount { color: var(--holo-lime); font-family: var(--prism-mono); font-variant-numeric: tabular-nums; font-weight: 800; } /* — Grade-ladder card cells (PSA badge · grade · pop · value · owned ✓) — */ [data-theme="prism"] .graded-card-cell { background: var(--prism-surface); border: 1px solid var(--holo-line); border-radius: 13px; box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset; } [data-theme="prism"] .graded-card-cell:hover { transform: translateY(-2px); border-color: rgba(91,217,230,0.4); box-shadow: 0 8px 22px rgba(0,0,0,0.45); } [data-theme="prism"] .graded-card-thumb-wrap, [data-theme="prism"] .graded-card-thumb-empty { background: rgba(8,5,18,0.6); border: 1px solid var(--holo-line); border-radius: 8px; } [data-theme="prism"] .graded-card-num { color: var(--holo-cyan); font-family: var(--prism-mono); font-variant-numeric: tabular-nums; } [data-theme="prism"] .graded-card-name { color: var(--holo-ink); font-weight: 700; } /* PSA grade strip — flat row, a quiet "PSA" tag, cyan-tinted grade pips. */ [data-theme="prism"] .graded-strip-label { color: rgba(91,217,230,0.7); font-family: var(--prism-mono); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; } [data-theme="prism"] .graded-pip { background: rgba(91,217,230,0.06); border: 1px solid rgba(91,217,230,0.28); border-radius: 10px; color: var(--holo-cyan); transition: transform 0.12s ease, border-color 0.15s ease, box-shadow 0.15s ease; } [data-theme="prism"] .graded-pip-grade { font-family: var(--prism-mono); font-variant-numeric: tabular-nums; font-weight: 700; color: var(--holo-cyan); } [data-theme="prism"] .graded-pip:hover { transform: translateY(-1px); border-color: rgba(91,217,230,0.6); } [data-theme="prism"] .graded-pip:focus-visible { outline: 2px solid var(--holo-cyan); outline-offset: 2px; } /* Owned at a grade → lime, the "you own this" accent, with the ×N count. */ [data-theme="prism"] .graded-pip.is-owned { background: rgba(201,242,92,0.12); border-color: rgba(201,242,92,0.5); box-shadow: 0 0 10px rgba(201,242,92,0.22); } [data-theme="prism"] .graded-pip.is-owned .graded-pip-grade { color: var(--holo-lime); } [data-theme="prism"] .graded-pip-owned { color: var(--holo-lime); font-family: var(--prism-mono); font-variant-numeric: tabular-nums; font-weight: 700; } [data-theme="prism"] .graded-strip-toggle { background: rgba(255,255,255,0.04); border: 1px solid var(--holo-line); border-radius: 999px; color: var(--holo-ink-dim); font-weight: 600; } [data-theme="prism"] .graded-strip-toggle:hover { border-color: rgba(91,217,230,0.45); color: var(--holo-cyan); } /* — In-tab filter bar — */ [data-theme="prism"] .graded-filter-bar { background: rgba(16,11,27,0.55); border: 1px solid var(--holo-line); border-radius: 13px; } [data-theme="prism"] .graded-filter-label { color: var(--holo-ink-faint); text-transform: uppercase; letter-spacing: 0.6px; font-size: 10px; font-weight: 700; } [data-theme="prism"] .graded-filter-search { background: rgba(8,5,18,0.6); border: 1px solid var(--holo-line); border-radius: 10px; color: var(--holo-ink); } [data-theme="prism"] .graded-filter-search::placeholder { color: var(--holo-ink-faint); } [data-theme="prism"] .graded-filter-search:focus { border-color: var(--holo-cyan); box-shadow: 0 0 12px rgba(91,217,230,0.3); outline: none; } [data-theme="prism"] .graded-filter-pill { background: rgba(255,255,255,0.04); border: 1px solid var(--holo-line); border-radius: 999px; color: var(--holo-ink-dim); font-weight: 600; } [data-theme="prism"] .graded-filter-pill:hover { border-color: rgba(91,217,230,0.4); color: var(--holo-ink); } [data-theme="prism"] .graded-filter-pill.is-active { background: linear-gradient(120deg, var(--holo-cyan), #3FB6C4); border-color: transparent; color: #06121a; box-shadow: 0 0 12px rgba(91,217,230,0.35); } [data-theme="prism"] .graded-filter-clear { background: none; border: none; color: var(--holo-cyan); text-decoration: underline; font-weight: 600; } /* — Inline "Add graded card" form — */ [data-theme="prism"] .graded-add-toggle { background: rgba(91,217,230,0.08); border: 1px solid rgba(91,217,230,0.28); border-radius: 999px; color: var(--holo-cyan); font-weight: 700; } [data-theme="prism"] .graded-add-toggle:hover { border-color: rgba(91,217,230,0.55); } [data-theme="prism"] .graded-add-form { background: rgba(8,5,18,0.5); border: 1px solid var(--holo-line); border-radius: 13px; } [data-theme="prism"] .graded-add-field-label { color: var(--holo-ink-faint); text-transform: uppercase; letter-spacing: 0.5px; font-size: 10px; font-weight: 700; } [data-theme="prism"] .graded-add-grade, [data-theme="prism"] .graded-add-cert { background: rgba(8,5,18,0.7); border: 1px solid var(--holo-line); border-radius: 8px; color: var(--holo-ink); font-family: var(--prism-mono); } [data-theme="prism"] .graded-add-grade:focus, [data-theme="prism"] .graded-add-cert:focus { border-color: var(--holo-cyan); box-shadow: 0 0 10px rgba(91,217,230,0.28); outline: none; } [data-theme="prism"] .graded-add-company { background: rgba(255,255,255,0.04); border: 1px solid var(--holo-line); border-radius: 999px; color: var(--holo-ink-dim); font-weight: 600; } [data-theme="prism"] .graded-add-company.is-active { background: linear-gradient(120deg, var(--holo-cyan), #3FB6C4); border-color: transparent; color: #06121a; } [data-theme="prism"] .graded-add-submit { background: linear-gradient(120deg, var(--holo-violet), #7E6CF5); border: none; border-radius: 8px; color: #0A0712; font-weight: 700; box-shadow: 0 0 12px var(--holo-glow-violet); } [data-theme="prism"] .graded-add-error { color: var(--holo-pink); } /* — Owned-copies track list — */ [data-theme="prism"] .graded-owned-row { background: rgba(255,255,255,0.03); border: 1px solid var(--holo-line); border-radius: 10px; } [data-theme="prism"] .graded-owned-label { color: var(--holo-ink); font-family: var(--prism-mono); } [data-theme="prism"] .graded-owned-verify { color: var(--holo-cyan); } [data-theme="prism"] .graded-owned-remove { background: rgba(255,122,182,0.1); border: 1px solid rgba(255,122,182,0.3); border-radius: 8px; color: var(--holo-pink); } [data-theme="prism"] .graded-owned-remove:hover { background: rgba(255,122,182,0.2); border-color: rgba(255,122,182,0.55); } /* — eBay / comps price rows — flat dark rows, mono values — */ [data-theme="prism"] .graded-ebay-toggle { background: rgba(255,255,255,0.04); border: 1px solid var(--holo-line); border-radius: 999px; color: var(--holo-ink-dim); font-weight: 600; } [data-theme="prism"] .graded-ebay-toggle:hover { border-color: rgba(91,217,230,0.4); color: var(--holo-cyan); } [data-theme="prism"] .graded-ebay-row { border-bottom: 1px solid var(--holo-line); } [data-theme="prism"] .graded-ebay-grade { color: var(--holo-ink-dim); font-family: var(--prism-mono); font-variant-numeric: tabular-nums; } [data-theme="prism"] .graded-price-val { color: var(--holo-lime); font-family: var(--prism-mono); font-variant-numeric: tabular-nums; font-weight: 700; } [data-theme="prism"] .graded-price-link, [data-theme="prism"] .graded-ebay-link { color: var(--holo-cyan); font-weight: 600; } [data-theme="prism"] .graded-ebay-link:hover, [data-theme="prism"] .graded-price-link:hover { text-decoration: underline; } [data-theme="prism"] .graded-price-freshness { color: var(--holo-ink-faint); } [data-theme="prism"] .graded-empty { color: var(--holo-ink-dim); background: rgba(255,255,255,0.03); border: 1px dashed var(--holo-line-strong); border-radius: 12px; } /* ===== §12 CARD SCANNER ==================================================== */ /* Modal shell — flat near-black panel, violet hairline (kills the navy/gold). The global-search overlay shares the treatment so it isn't the one gold/navy panel left under prism. */ [data-theme="prism"] .scan-modal, [data-theme="prism"] .gsearch-modal { background: rgba(8,5,16,0.86); } [data-theme="prism"] .scan-modal-content, [data-theme="prism"] .scan-modal-content.scan-camera, [data-theme="prism"] .gsearch-content { background: linear-gradient(180deg, #100B1B 0%, #0C0817 100%); border: 1px solid var(--holo-line); border-radius: 18px; box-shadow: 0 24px 60px rgba(20,8,40,0.55); } [data-theme="prism"] .gsearch-content h2 { color: var(--holo-ink); font-weight: 800; letter-spacing: -0.2px; } [data-theme="prism"] .gsearch-close { color: var(--holo-ink-dim); } [data-theme="prism"] .gsearch-close:hover { color: var(--holo-ink); } [data-theme="prism"] .gsearch-input-row:focus-within { border-color: var(--holo-violet); } [data-theme="prism"] .gsearch-scope-pill.active { background: rgba(182, 140, 255, 0.18); border-color: var(--holo-violet); color: var(--holo-violet); } [data-theme="prism"] .scan-modal-content h2 { color: var(--holo-ink); font-weight: 800; letter-spacing: -0.2px; } [data-theme="prism"] .scan-modal-scope { color: var(--holo-cyan); font-family: var(--prism-mono); font-style: normal; letter-spacing: 0.4px; } [data-theme="prism"] .scan-modal-close { color: var(--holo-ink-dim); } [data-theme="prism"] .scan-modal-close:hover { color: var(--holo-ink); } /* — Viewfinder: the ONE signature neon moment — */ [data-theme="prism"] .scan-video-wrap { border: 1px solid var(--holo-line); border-radius: 14px; background: #06040d; } /* "LOCAL OCR · NO UPLOAD" privacy chip — local-only reassurance (mock §12). Pinned to the viewfinder's bottom-left so it clears the centred status pill (top) and the bulk-add toast (bottom-centre). CSS `content` because the markup carries no element for it — see deferred note. */ [data-theme="prism"] .scan-stage-preview .scan-video-wrap::before { content: "LOCAL OCR · NO UPLOAD"; position: absolute; left: 10px; bottom: 10px; z-index: 4; padding: 4px 9px; border-radius: 999px; background: rgba(8,5,16,0.72); border: 1px solid rgba(91,217,230,0.3); color: rgba(91,217,230,0.85); font-family: var(--prism-mono); font-size: 9px; font-weight: 700; letter-spacing: 1.2px; pointer-events: none; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } /* Prism-bracket frame: 4 corner accents (violet/cyan/lime/pink) drawn as layered gradients, a faint inner tint, and a deeper vignette. */ [data-theme="prism"] .scan-card-frame { border: none; border-radius: 14px; box-shadow: 0 0 0 9999px rgba(6,4,13,0.55); background-repeat: no-repeat; background-image: /* top-left — violet */ linear-gradient(var(--holo-violet), var(--holo-violet)), linear-gradient(var(--holo-violet), var(--holo-violet)), /* top-right — cyan */ linear-gradient(var(--holo-cyan), var(--holo-cyan)), linear-gradient(var(--holo-cyan), var(--holo-cyan)), /* bottom-left — pink */ linear-gradient(var(--holo-pink), var(--holo-pink)), linear-gradient(var(--holo-pink), var(--holo-pink)), /* bottom-right — lime */ linear-gradient(var(--holo-lime), var(--holo-lime)), linear-gradient(var(--holo-lime), var(--holo-lime)), /* inner tint */ linear-gradient(135deg, rgba(182,140,255,0.12), rgba(91,217,230,0.07)); background-position: top left, top left, top right, top right, bottom left, bottom left, bottom right, bottom right, center; background-size: 34px 3px, 3px 34px, 34px 3px, 3px 34px, 34px 3px, 3px 34px, 34px 3px, 3px 34px, 100% 100%; } /* Scan-line — a cyan sweep that tracks down the frame (reduced-motion safe). */ [data-theme="prism"] .scan-card-frame::before { content: ""; position: absolute; left: 8px; right: 8px; top: 8%; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--holo-cyan), transparent); box-shadow: 0 0 14px var(--holo-cyan); animation: prism-scan-line 2.4s ease-in-out infinite alternate; pointer-events: none; } @keyframes prism-scan-line { 0% { top: 8%; } 100% { top: 88%; } } @media (prefers-reduced-motion: reduce) { [data-theme="prism"] .scan-card-frame::before { animation: none; top: 50%; } } /* — Status pill + spinner (recolour from gold) — */ [data-theme="prism"] .scan-status { background: rgba(8,5,16,0.72); border: 1px solid var(--holo-line); color: var(--holo-ink); } [data-theme="prism"] .scan-status-spinner { border-color: rgba(91,217,230,0.3); border-top-color: var(--holo-cyan); } [data-theme="prism"] .scan-status.is-found { background: rgba(201,242,92,0.14); border-color: rgba(201,242,92,0.4); color: var(--holo-lime); } [data-theme="prism"] .scan-status.is-found .scan-status-spinner { border-color: var(--holo-lime); border-top-color: var(--holo-lime); } [data-theme="prism"] .scan-bulk-count { color: var(--holo-lime); background: rgba(201,242,92,0.12); font-family: var(--prism-mono); } [data-theme="prism"] .scan-bulk-toggle input { accent-color: var(--holo-violet); } [data-theme="prism"] .scan-toast { background: rgba(201,242,92,0.92); color: #0a1400; } /* — Buttons — */ [data-theme="prism"] .scan-btn-primary { background: linear-gradient(120deg, var(--holo-violet), #7E6CF5); color: #0A0712; box-shadow: 0 0 16px var(--holo-glow-violet); } [data-theme="prism"] .scan-btn-secondary { background: transparent; color: var(--holo-ink); border-color: var(--holo-line-strong); } [data-theme="prism"] .scan-btn-secondary:hover { border-color: rgba(182,140,255,0.55); } [data-theme="prism"] .scan-btn-link { color: var(--holo-ink-dim); } [data-theme="prism"] .scan-btn-link:hover { color: var(--holo-ink); } [data-theme="prism"] .scan-btn-switch { background: rgba(91,217,230,0.14); color: var(--holo-cyan); border-color: rgba(91,217,230,0.4); } [data-theme="prism"] .scan-btn-switch:hover { background: rgba(91,217,230,0.24); border-color: rgba(91,217,230,0.7); } [data-theme="prism"] .scan-btn:focus-visible { outline: 2px solid var(--holo-cyan); outline-offset: 2px; } /* — Captured stage — */ [data-theme="prism"] .scan-captured-wrap { border: 1px solid var(--holo-line); border-radius: 14px; background: #06040d; } /* — Result sheet: matched card + REG/HOLO/PSA-style chips + Add to collection — */ [data-theme="prism"] .scan-stage-result .scan-result-image { background: #06040d; border: 1px solid var(--holo-line); border-radius: 10px; } [data-theme="prism"] .scan-stage-result .scan-result-card-name { color: var(--holo-ink); font-weight: 800; } [data-theme="prism"] .scan-stage-result .scan-result-card-meta { color: var(--holo-ink-dim); font-family: var(--prism-mono); } [data-theme="prism"] .scan-stage-result .scan-result-price, [data-theme="prism"] .scan-stage-result .scan-result-price-variant-value { color: var(--holo-lime); font-family: var(--prism-mono); font-variant-numeric: tabular-nums; } [data-theme="prism"] .scan-stage-result .scan-result-price-variant-label, [data-theme="prism"] .scan-stage-result .scan-result-price-source, [data-theme="prism"] .scan-stage-result .scan-result-price-loading, [data-theme="prism"] .scan-stage-result .scan-result-price-empty { color: var(--holo-ink-dim); } /* In-collection confirmation chip — lime "you own this" accent. */ [data-theme="prism"] .scan-stage-result .scan-result-badge { color: var(--holo-lime); background: rgba(201,242,92,0.12); border: 1px solid rgba(201,242,92,0.4); } /* The primary collection CTA gets the mock's lime "Add to collection" treatment; other primaries stay violet so the lime reads as the one decisive action. */ [data-theme="prism"] .scan-stage-result .scan-result-mark-btn { background: linear-gradient(120deg, var(--holo-lime), #9fe040); color: #0a1400; box-shadow: 0 8px 22px rgba(201,242,92,0.34); } [data-theme="prism"] .scan-stage-result[data-collected="true"] .scan-result-mark-btn { background: transparent; color: var(--holo-ink); border: 1px solid var(--holo-line-strong); box-shadow: none; } [data-theme="prism"] .scan-result-no-price { background: rgba(255,255,255,0.04); border: 1px solid var(--holo-line); border-radius: 13px; color: var(--holo-ink); } [data-theme="prism"] .scan-result-no-price-msg { color: var(--holo-ink-dim); } [data-theme="prism"] .scan-result-no-price-link { color: var(--holo-cyan); } /* — Grade-picker stage (PSA/BGS/CGC/SGC company buttons + fields) — */ [data-theme="prism"] .scan-grade-company-btn { background: rgba(255,255,255,0.04); border: 1px solid var(--holo-line); border-radius: 999px; color: var(--holo-ink-dim); font-weight: 600; } [data-theme="prism"] .scan-grade-company-btn.is-active, [data-theme="prism"] .scan-grade-company-btn[aria-pressed="true"] { background: linear-gradient(120deg, var(--holo-cyan), #3FB6C4); border-color: transparent; color: #06121a; } [data-theme="prism"] .scan-grade-field span { color: var(--holo-ink-dim); } [data-theme="prism"] .scan-grade-field input, [data-theme="prism"] .scan-manual-field select, [data-theme="prism"] .scan-manual-field input { background: rgba(8,5,18,0.7); border: 1px solid var(--holo-line); border-radius: 8px; color: var(--holo-ink); } [data-theme="prism"] .scan-grade-field input:focus, [data-theme="prism"] .scan-manual-field select:focus, [data-theme="prism"] .scan-manual-field input:focus { border-color: var(--holo-cyan); box-shadow: 0 0 10px rgba(91,217,230,0.28); outline: none; } [data-theme="prism"] .scan-grade-error, [data-theme="prism"] .scan-manual-error { color: var(--holo-pink); } [data-theme="prism"] .scan-manual-note, [data-theme="prism"] .scan-grade-title, [data-theme="prism"] .scan-picker-title { color: var(--holo-ink); } [data-theme="prism"] .scan-error-message { color: var(--holo-pink); } [data-theme="prism"] .scan-error-help { color: var(--holo-ink-dim); } /* — Set / disambiguation / CLIP pickers — flat dark rows — */ [data-theme="prism"] .scan-picker-item, [data-theme="prism"] .scan-disambig-item, [data-theme="prism"] .scan-clip-card { background: var(--prism-surface); border: 1px solid var(--holo-line); border-radius: 12px; } [data-theme="prism"] .scan-picker-item:hover, [data-theme="prism"] .scan-disambig-item:hover, [data-theme="prism"] .scan-clip-card:hover { border-color: rgba(91,217,230,0.45); transform: translateY(-1px); } [data-theme="prism"] .scan-disambig-confidence, [data-theme="prism"] .scan-clip-card-score { color: var(--holo-cyan); font-family: var(--prism-mono); } /* @prism-s6:end */ /* @prism-s7:begin — Store Hunter dark map + neon pins (§13) + Symbol Dex grid (§14) */ /* ────────────────────────────────────────────────────────────────────────── * §13 STORE HUNTER — dark map (CSS filter on the existing OSM/Leaflet tiles, * NO new tile host), neon markers, and a flat dark nearby-stores list. * ──────────────────────────────────────────────────────────────────────── */ /* Map shell — rounded violet-hairline frame; near-black violet base so the container reads intentional even before tiles paint. */ [data-theme="prism"] .sf-map { border-radius: 16px; border: 1px solid rgba(182, 140, 255, 0.18); background: linear-gradient(160deg, #0E1220, #0A0712); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45); } [data-theme="prism"] .leaflet-container { background: #0A0712; font-family: var(--prism-sans); } /* THE signature surface: dark-skin the raster OSM tiles in place. invert + hue-rotate flips the light basemap to a cool near-black violet; the trimmed brightness/contrast/saturation keep road + place labels legible. */ [data-theme="prism"] .leaflet-tile { filter: invert(1) hue-rotate(198deg) brightness(0.9) contrast(0.9) saturate(0.85); } /* Neon store markers. The default Leaflet pin PNG is recolored violet via hue-rotate + lifted with a violet glow; the grey ground shadow is dropped so pins read as light-emitting on the dark map. (Per-pin colors = custom L.divIcon = JS; deferred — see report.) */ [data-theme="prism"] .leaflet-marker-icon { filter: hue-rotate(55deg) saturate(1.4) brightness(1.12) drop-shadow(0 0 8px rgba(182, 140, 255, 0.7)); } [data-theme="prism"] .leaflet-marker-shadow { opacity: 0; } /* "You are here" — the JS draws a circleMarker as an SVG ; recolor it to the theme cyan with a soft pulsing glow (CSS props beat presentation attrs). */ @keyframes prism-sf-userpulse { 0%, 100% { filter: drop-shadow(0 0 4px rgba(91, 217, 230, 0.55)); } 50% { filter: drop-shadow(0 0 12px rgba(91, 217, 230, 0.95)); } } [data-theme="prism"] .leaflet-overlay-pane path { stroke: var(--holo-cyan); fill: var(--holo-cyan); animation: prism-sf-userpulse 2.2s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { [data-theme="prism"] .leaflet-overlay-pane path { animation: none; filter: drop-shadow(0 0 7px rgba(91, 217, 230, 0.7)); } } /* Zoom control — flat dark chips, violet hover, visible keyboard focus. */ [data-theme="prism"] .leaflet-bar { border: 1px solid var(--holo-line); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5); } [data-theme="prism"] .leaflet-bar a, [data-theme="prism"] .leaflet-control-zoom a { background: rgba(16, 11, 27, 0.92); color: var(--holo-ink); border-bottom: 1px solid var(--holo-line); } [data-theme="prism"] .leaflet-bar a:hover, [data-theme="prism"] .leaflet-control-zoom a:hover { background: rgba(182, 140, 255, 0.18); color: #fff; } [data-theme="prism"] .leaflet-bar a:focus-visible { outline: 2px solid var(--holo-cyan); outline-offset: 2px; } /* Attribution — quiet, dark, never washed out by the tile filter. */ [data-theme="prism"] .leaflet-control-attribution { background: rgba(8, 5, 18, 0.72); color: var(--holo-ink-faint); } [data-theme="prism"] .leaflet-control-attribution a { color: var(--holo-ink-dim); } /* Marker popups — dark prism panel instead of the default white bubble. */ [data-theme="prism"] .leaflet-popup-content-wrapper { background: rgba(16, 11, 27, 0.96); color: var(--holo-ink); border: 1px solid var(--holo-line-strong); border-radius: 12px; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6); } [data-theme="prism"] .leaflet-popup-tip { background: rgba(16, 11, 27, 0.96); border: 1px solid var(--holo-line-strong); } [data-theme="prism"] .leaflet-popup-close-button { color: var(--holo-ink-dim); } [data-theme="prism"] .leaflet-popup-content .sf-popup-addr, [data-theme="prism"] .leaflet-popup-content .sf-popup-hours { color: var(--holo-ink-dim); } [data-theme="prism"] .leaflet-popup-content .sf-popup-dist { color: var(--holo-cyan); font-family: var(--prism-mono); } /* Nearby-stores list — flat dark rounded rows with violet hairlines; a mono "// " code-comment header in violet to match the mock's section labels. */ [data-theme="prism"] .sf-list-panel { background: transparent; border: none; border-radius: 0; overflow: visible; } [data-theme="prism"] .sf-list-header { padding: 16px 4px 10px; border-bottom: none; font-family: var(--prism-mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--holo-violet); } [data-theme="prism"] .sf-list-header::before { content: "// "; } [data-theme="prism"] .sf-store-list { display: flex; flex-direction: column; gap: 8px; padding: 0; } [data-theme="prism"] .sf-store-item { padding: 11px 13px; border: 1px solid var(--holo-line); border-radius: 13px; background: rgba(255, 255, 255, 0.03); } [data-theme="prism"] .sf-store-item:hover { background: rgba(182, 140, 255, 0.08); border-color: var(--holo-line-strong); } [data-theme="prism"] .sf-store-name { color: var(--holo-ink); font-weight: 600; } [data-theme="prism"] .sf-store-dist { background: transparent; padding: 0; border-radius: 0; color: var(--holo-cyan); font-family: var(--prism-mono); font-variant-numeric: tabular-nums; font-weight: 700; } [data-theme="prism"] .sf-store-addr, [data-theme="prism"] .sf-store-hours { color: var(--holo-ink-dim); font-family: var(--prism-mono); } [data-theme="prism"] .sf-store-link { color: var(--holo-violet); } [data-theme="prism"] .sf-store-link:hover { color: #fff; } [data-theme="prism"] .sf-store-link:focus-visible, [data-theme="prism"] .sf-locate-btn:focus-visible, [data-theme="prism"] .sf-address-search-btn:focus-visible { outline: 2px solid var(--holo-cyan); outline-offset: 2px; } /* ────────────────────────────────────────────────────────────────────────── * §14 SYMBOL DEX — era tiles: set symbol on a LIGHT chip + era name/year. * (The light chip is essential — most set symbols are dark/monochrome and * would vanish on the near-black surface.) * ──────────────────────────────────────────────────────────────────────── */ [data-theme="prism"] .si-symbol-grid { gap: 9px; } [data-theme="prism"] .si-symbol-item { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(182, 140, 255, 0.14); border-radius: 13px; padding: 11px 8px 9px; } [data-theme="prism"] .si-symbol-item:hover { background: rgba(182, 140, 255, 0.10); border-color: var(--holo-violet); box-shadow: 0 0 14px var(--holo-glow-violet); transform: translateY(-2px); } /* Light chip carrying the set symbol. */ [data-theme="prism"] .si-symbol-img-wrap { width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.5); margin-bottom: 6px; } [data-theme="prism"] .si-symbol-img { max-width: 70%; max-height: 70%; filter: none; } /* Text fallback sits inside the same light chip → dark ink for contrast. */ [data-theme="prism"] .si-symbol-code { color: #1A1430; line-height: 1; } [data-theme="prism"] .si-symbol-name { color: var(--holo-ink); font-weight: 700; } [data-theme="prism"] .si-symbol-year { color: var(--holo-ink-faint); font-family: var(--prism-mono); font-variant-numeric: tabular-nums; } /* @prism-s7:end */ /* @prism-s8:begin — Bulk multi-select + action bar (§10) + Settings picker (§15) */ /* ════════════════════════════════════════════════════════════════════════ * §10 — BULK MULTI-SELECT + ACTION BAR * Flat near-black surfaces, violet selection ring + check chip, pink remove, * lime "synced/added" numerals. Re-skin only — markup/JS unchanged. * ════════════════════════════════════════════════════════════════════════ */ /* ── "Select" entry pill in the card-controls row ───────────────────────── Mock: violet-tinted chip with a violet check-square glyph. */ [data-theme="prism"] .bulk-select-all-visible { background: rgba(182,140,255,0.16); border: 1px solid rgba(182,140,255,0.40); color: var(--holo-violet); font-weight: 700; } [data-theme="prism"] .bulk-select-all-visible:hover { background: rgba(182,140,255,0.26); border-color: var(--holo-violet); box-shadow: 0 0 12px var(--holo-glow-violet); } [data-theme="prism"] .bulk-select-all-set { border-style: dashed; border-color: var(--holo-line-strong); color: var(--holo-ink-dim); } [data-theme="prism"] .bulk-select-all-visible:focus-visible { outline: 2px solid var(--holo-cyan); outline-offset: 2px; } /* ── Selection ring + violet check chip on selected cards ───────────────── Mock: 2px violet ring + soft violet glow on the tile, a filled violet circular ✓ chip and a faint violet wash over the art. */ [data-theme="prism"] .card-item.bulk-selected { border-color: var(--holo-violet); box-shadow: 0 0 0 2px var(--holo-violet), 0 0 16px var(--holo-glow-violet); } [data-theme="prism"] .card-item.bulk-selected::before { content: ""; display: block !important; /* re-enable the killed ::before as the wash */ position: absolute; inset: 0; background: rgba(182,140,255,0.20); pointer-events: none; z-index: 1; border-radius: inherit; } [data-theme="prism"] .card-list-row.bulk-selected { border-color: var(--holo-violet); box-shadow: inset 3px 0 0 var(--holo-violet), 0 0 14px var(--holo-glow-violet); background: linear-gradient(90deg, rgba(182,140,255,0.10), transparent 60%); } /* The native select checkbox → violet accent so the ✓ reads as the chip. */ [data-theme="prism"] .bulk-select-checkbox { accent-color: var(--holo-violet); } [data-theme="prism"] .bulk-select-checkbox:focus-visible { outline: 2px solid var(--holo-cyan); outline-offset: 2px; } /* ── Bottom bulk action bar — flat dark panel, neon-accented controls ──── */ [data-theme="prism"] .bulk-action-bar { background: rgba(20,14,34,0.92); border: 1px solid rgba(182,140,255,0.22); border-radius: 18px; box-shadow: 0 -6px 30px rgba(0,0,0,0.55), 0 24px 60px rgba(20,8,40,0.4); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } [data-theme="prism"] .bulk-action-bar-count { color: var(--holo-ink); font-weight: 700; } /* Primary "+1 to each" — the loud violet action. */ [data-theme="prism"] .bulk-action-btn-primary { background: linear-gradient(120deg, var(--holo-violet), #7E6CF5); color: #0A0712; border: 1px solid transparent; box-shadow: 0 6px 18px var(--holo-glow-violet); } [data-theme="prism"] .bulk-action-btn-primary:hover { background: linear-gradient(120deg, #C5A2FF, #8E7CFF); box-shadow: 0 6px 22px rgba(182,140,255,0.6); } /* Tonal (Set qty / Mark each) + bare fallback — quiet flat-dark chips. */ [data-theme="prism"] .bulk-action-btn-tonal, [data-theme="prism"] .bulk-action-btn:not(.bulk-action-btn-primary):not(.bulk-action-btn-tonal):not(.bulk-action-btn-remove):not(.bulk-action-btn-secondary) { background: rgba(255,255,255,0.04); color: var(--holo-ink); border: 1px solid rgba(182,140,255,0.30); } [data-theme="prism"] .bulk-action-btn-tonal:hover, [data-theme="prism"] .bulk-action-btn:not(.bulk-action-btn-primary):not(.bulk-action-btn-tonal):not(.bulk-action-btn-remove):not(.bulk-action-btn-secondary):hover { background: rgba(182,140,255,0.16); border-color: var(--holo-violet); } /* Remove — pink, clearly destructive. */ [data-theme="prism"] .bulk-action-remove-group { border-left: 1px solid rgba(255,122,182,0.30); } [data-theme="prism"] .bulk-action-btn-remove { background: rgba(255,122,182,0.08); color: var(--holo-pink); border: 1px solid rgba(255,122,182,0.40); } [data-theme="prism"] .bulk-action-btn-remove:hover { background: rgba(255,122,182,0.18); border-color: var(--holo-pink); } /* Done — neutral. */ [data-theme="prism"] .bulk-action-btn-secondary { background: rgba(255,255,255,0.05); color: var(--holo-ink-dim); border: 1px solid var(--holo-line); } [data-theme="prism"] .bulk-action-btn-secondary:hover { background: rgba(255,255,255,0.10); border-color: var(--holo-line-strong); color: var(--holo-ink); } /* Variant scope trigger + edition select — flat-dark sibling inputs. */ [data-theme="prism"] .bulk-action-select, [data-theme="prism"] .bulk-variant-trigger { background: rgba(255,255,255,0.04); border: 1px solid rgba(182,140,255,0.16); color: var(--holo-ink); } [data-theme="prism"] .bulk-action-select:hover, [data-theme="prism"] .bulk-variant-trigger:hover { background: rgba(182,140,255,0.12); border-color: var(--holo-line-strong); } [data-theme="prism"] .bulk-variant-trigger[aria-expanded="true"] { background: rgba(182,140,255,0.16); border-color: var(--holo-violet); box-shadow: 0 0 12px var(--holo-glow-violet); } [data-theme="prism"] .bulk-action-select option { color: var(--holo-ink); background: #140E22; } /* All bar controls — cyan keyboard focus ring. */ [data-theme="prism"] .bulk-action-btn:focus-visible, [data-theme="prism"] .bulk-action-control:focus-visible { outline: 2px solid var(--holo-cyan); outline-offset: 2px; } /* Variant scope popover (Regular / Reverse / Both) — flat-dark, violet checks. */ [data-theme="prism"] .bulk-variant-panel { background: rgba(20,14,34,0.98); border: 1px solid rgba(182,140,255,0.30); box-shadow: 0 -6px 30px rgba(0,0,0,0.6); } [data-theme="prism"] .bulk-variant-row { color: var(--holo-ink); } [data-theme="prism"] .bulk-variant-row:hover { background: rgba(182,140,255,0.12); } [data-theme="prism"] .bulk-variant-checkbox { accent-color: var(--holo-violet); } [data-theme="prism"] .bulk-variant-checkbox:focus-visible { outline: 2px solid var(--holo-cyan); outline-offset: 2px; } /* "Set qty…" confirm modal + steppers — flat-dark prism. */ [data-theme="prism"] .bulk-confirm-modal-backdrop { background: rgba(5,3,12,0.55); } [data-theme="prism"] .bulk-confirm-modal { background: rgba(20,14,34,0.96); border: 1px solid rgba(182,140,255,0.30); box-shadow: 0 24px 60px rgba(20,8,40,0.5); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } [data-theme="prism"] .bulk-confirm-modal-title { color: var(--holo-ink); } [data-theme="prism"] .bulk-confirm-modal-body { color: var(--holo-ink-dim); } [data-theme="prism"] .bulk-confirm-modal-input-row { background: rgba(255,255,255,0.04); } [data-theme="prism"] .bulk-confirm-modal-step { background: rgba(182,140,255,0.12); color: var(--holo-ink); } [data-theme="prism"] .bulk-confirm-modal-step:hover { background: rgba(182,140,255,0.24); } [data-theme="prism"] .bulk-confirm-modal-input { background: rgba(8,5,18,0.55); border: 1px solid var(--holo-line); color: var(--holo-ink); font-family: var(--prism-mono); font-variant-numeric: tabular-nums; } [data-theme="prism"] .bulk-confirm-modal-cancel { background: rgba(255,255,255,0.06); color: var(--holo-ink-dim); } [data-theme="prism"] .bulk-confirm-modal-cancel:hover { background: rgba(255,255,255,0.12); color: var(--holo-ink); } [data-theme="prism"] .bulk-confirm-modal-primary { background: linear-gradient(120deg, var(--holo-violet), #7E6CF5); color: #0A0712; } [data-theme="prism"] .bulk-confirm-modal-primary:hover { background: linear-gradient(120deg, #C5A2FF, #8E7CFF); } [data-theme="prism"] .bulk-confirm-modal-primary[data-style="danger"] { background: linear-gradient(120deg, var(--holo-pink), #E85C9C); color: #1A0410; } [data-theme="prism"] .bulk-confirm-modal-primary[data-style="danger"]:hover { background: linear-gradient(120deg, #FF92C6, #F06AA8); } [data-theme="prism"] .bulk-confirm-modal-btn:focus-visible, [data-theme="prism"] .bulk-confirm-modal-step:focus-visible, [data-theme="prism"] .bulk-confirm-modal-input:focus-visible { outline: 2px solid var(--holo-cyan); outline-offset: 2px; } /* ════════════════════════════════════════════════════════════════════════ * §15 — SETTINGS / THEME PICKER (#themeMenu) + account sync pill * ════════════════════════════════════════════════════════════════════════ */ /* The popover surface — flat near-black violet, soft drop shadow. */ [data-theme="prism"] .theme-menu { background: rgba(16,11,27,0.97); border: 1px solid rgba(182,140,255,0.22); box-shadow: 0 24px 60px rgba(20,8,40,0.5), inset 0 1px 0 rgba(255,255,255,0.04); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } [data-theme="prism"] .theme-menu-title { color: var(--holo-violet); font-family: var(--prism-mono); letter-spacing: 1.5px; } [data-theme="prism"] .theme-option { color: var(--holo-ink); } [data-theme="prism"] .theme-option:hover { background: rgba(182,140,255,0.10); } [data-theme="prism"] .theme-option:focus-within { background: rgba(182,140,255,0.12); outline: 2px solid var(--holo-cyan); outline-offset: -2px; } /* Selected theme row — violet ring + tint + glow, mirroring the mock's highlighted Prism card. */ [data-theme="prism"] .theme-option:has(input:checked) { background: rgba(182,140,255,0.08); box-shadow: inset 0 0 0 1.5px var(--holo-violet), 0 0 18px rgba(182,140,255,0.30); } [data-theme="prism"] .theme-option input[type="radio"] { accent-color: var(--holo-violet); } [data-theme="prism"] .theme-option-swatch { border-color: rgba(182,140,255,0.30); } [data-theme="prism"] .theme-option-sub { color: var(--holo-ink-faint); font-family: var(--prism-mono); } [data-theme="prism"] .theme-menu-foot { border-top: 1px solid var(--holo-line); color: var(--holo-ink-faint); } /* Account / user bar — flat dark; the SYNCED pill already reads lime (see §10 sync-status above). Keep the avatar/name legible. */ [data-theme="prism"] .user-bar { background: rgba(20,14,34,0.55); border: 1px solid var(--holo-line); } [data-theme="prism"] .user-display-name { color: var(--holo-ink); } [data-theme="prism"] .user-collection-name { color: var(--holo-ink-dim); } /* @prism-s8:end */ /* ───────────────────────────────────────────────────────────────────────────── * S9 · Primary navigation (§3) — mobile bottom tab bar + raised Scan FAB, * desktop sidebar, and the circular gold brand badge (§1 follow-up). * * Markup ships in index.html (#prismBottomNav, #prismSidebar, .header-badge) * and is display:none for every theme in styles.css — these rules reveal and * lay it out under PRISM only. Behavior is wired in js/prism-nav.js. * * Layout contract (from the mock): * • <1024px — 68px blurred dark bottom bar (Sets · Hunt · SCAN · Custom · * Dex), center FAB 50px raised -26px, violet→pink gradient. The top rail * keeps ONLY the five game chips (utility text-tabs move into the bar); * the base floating .scan-fab is replaced by the raised FAB. * • ≥1024px — fixed 248px left sidebar (brand badge + nav rows + YOUR * GAMES with live %); the top rail and bottom bar are hidden; content * shifts right via body padding (viewport-fixed modals are unaffected). * ──────────────────────────────────────────────────────────────────────────── */ /* @prism-s9:begin — §3 primary navigation + §1 circular badge */ /* ── §1 · Circular gold badge beside the wordmark ──────────────────────────── */ [data-theme="prism"] .logo-link { display: inline-flex; align-items: center; justify-content: center; gap: 14px; } [data-theme="prism"] .header-badge { display: block; width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; box-shadow: 0 0 0 1.5px rgba(182, 140, 255, 0.50), 0 0 16px rgba(182, 140, 255, 0.40); } @media (max-width: 480px) { [data-theme="prism"] .header-badge { width: 42px; height: 42px; } } /* ── Shared nav-item resets ────────────────────────────────────────────────── */ [data-theme="prism"] .prism-nav-item, [data-theme="prism"] .prism-nav-scan, [data-theme="prism"] .prism-side-item, [data-theme="prism"] .prism-side-game { font-family: var(--prism-sans); border: none; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; } [data-theme="prism"] .prism-nav-item:focus-visible, [data-theme="prism"] .prism-nav-scan:focus-visible, [data-theme="prism"] .prism-side-item:focus-visible, [data-theme="prism"] .prism-side-game:focus-visible { outline: 2px solid var(--holo-cyan); outline-offset: 2px; } /* ── Mobile bottom bar (<1024px) ───────────────────────────────────────────── */ @media (max-width: 1023.98px) { [data-theme="prism"] .prism-bottomnav { display: flex; align-items: center; justify-content: space-around; position: fixed; left: 0; right: 0; bottom: 0; height: 68px; padding: 0 18px env(safe-area-inset-bottom, 0px); background: rgba(8, 5, 16, 0.86); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-top: 1px solid var(--holo-line); z-index: 940; /* above the base .scan-fab (900), below modals (1000+) */ } /* Keep page content clear of the fixed bar. */ [data-theme="prism"] body { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } /* The utility text-tabs move into the bottom bar — the top rail keeps only the five game chips (matches the mock's game-chip row). */ [data-theme="prism"] .top-tabs .top-tab-utility, [data-theme="prism"] .top-tabs .top-tab-divider { display: none; } } [data-theme="prism"] .prism-nav-item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 10px; border-radius: 10px; font-size: 0.5625rem; /* 9px labels per the mock */ font-weight: 600; letter-spacing: 0.2px; color: var(--holo-ink-faint); transition: color 0.15s ease; } [data-theme="prism"] .prism-nav-item svg { display: block; } [data-theme="prism"] .prism-nav-item:hover { color: var(--holo-ink-dim); } [data-theme="prism"] .prism-nav-item.active { color: var(--holo-violet); font-weight: 700; } /* Raised center Scan FAB — 50px, 18px radius, violet→pink, floats -26px. */ [data-theme="prism"] .prism-nav-scan { width: 50px; height: 50px; border-radius: 18px; margin-top: -26px; background: linear-gradient(135deg, var(--holo-violet), var(--holo-pink)); color: #0A0712; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; box-shadow: 0 8px 22px rgba(182, 140, 255, 0.50); transition: transform 0.15s ease, box-shadow 0.15s ease; } [data-theme="prism"] .prism-nav-scan:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(182, 140, 255, 0.60); } [data-theme="prism"] .prism-nav-scan:active { transform: translateY(0); } /* The bottom bar's FAB (mobile) / the sidebar's Scanner row (desktop) replace the base floating pill at every width under PRISM. */ [data-theme="prism"] .scan-fab { display: none !important; } /* ── Desktop sidebar (≥1024px) ─────────────────────────────────────────────── */ @media (min-width: 1024px) { [data-theme="prism"] .prism-sidebar { display: flex; flex-direction: column; gap: 5px; position: fixed; top: 0; left: 0; bottom: 0; width: 248px; padding: 18px 14px; box-sizing: border-box; background: rgba(10, 7, 18, 0.72); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-right: 1px solid var(--holo-line); overflow-y: auto; z-index: 60; } /* Shift the page right of the fixed rail. Viewport-fixed overlays (modals, scan modal, landing) are unaffected by body padding. */ [data-theme="prism"] body { padding-left: 248px; } /* The sidebar (nav rows + YOUR GAMES) covers everything the rail did. */ [data-theme="prism"] .top-tabs { display: none; } } [data-theme="prism"] .prism-sidebar-brand { display: flex; align-items: center; gap: 11px; padding: 4px 8px 14px; } [data-theme="prism"] .prism-sidebar-badge { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; box-shadow: 0 0 14px rgba(182, 140, 255, 0.45); } [data-theme="prism"] .prism-sidebar-wordmark { display: flex; flex-direction: column; line-height: 1.05; } [data-theme="prism"] .prism-sidebar-title { font-family: var(--prism-sans); font-size: 0.95rem; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; color: var(--prism-gold); text-shadow: 0 0 1px rgba(255, 240, 200, 0.7); } [data-theme="prism"] .prism-sidebar-sub { font-family: var(--prism-mono); font-size: 0.5rem; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; color: var(--prism-gold); opacity: 0.78; margin-top: 3px; } [data-theme="prism"] .prism-side-item { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 11px; border: 1px solid transparent; font-size: 0.8125rem; font-weight: 600; text-align: left; color: var(--holo-ink-dim); transition: background 0.15s ease, color 0.15s ease; } [data-theme="prism"] .prism-side-item svg { flex: 0 0 auto; } [data-theme="prism"] .prism-side-item:hover { background: rgba(182, 140, 255, 0.08); color: var(--holo-ink); } [data-theme="prism"] .prism-side-item.active { background: linear-gradient(100deg, rgba(182, 140, 255, 0.20), transparent); border-color: rgba(182, 140, 255, 0.30); color: #fff; } [data-theme="prism"] .prism-side-item.active svg { color: var(--holo-violet); } /* Collections is an authed surface — hide the row for guests. */ body.guest-mode .prism-side-collections { display: none !important; } [data-theme="prism"] .prism-sidebar-divider { height: 1px; background: var(--holo-line); margin: 14px 4px; flex: 0 0 auto; } [data-theme="prism"] .prism-sidebar-label { font-family: var(--prism-mono); font-size: 0.5625rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--holo-ink-faint); margin: 0 8px 8px; } [data-theme="prism"] .prism-sidebar-games { display: flex; flex-direction: column; gap: 3px; } [data-theme="prism"] .prism-side-game { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; font-size: 0.75rem; font-weight: 500; text-align: left; color: var(--holo-ink-dim); transition: background 0.15s ease, color 0.15s ease; } [data-theme="prism"] .prism-side-game:hover { background: rgba(182, 140, 255, 0.08); } [data-theme="prism"] .prism-side-game.active { background: rgba(255, 255, 255, 0.04); color: #fff; font-weight: 600; } [data-theme="prism"] .prism-side-game-name { flex: 1; min-width: 0; } [data-theme="prism"] .prism-side-game-pct { font-family: var(--prism-mono); font-size: 0.625rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--holo-ink-faint); } [data-theme="prism"] .prism-side-game.active .prism-side-game-pct { color: var(--holo-violet); } /* Reduced motion — the FAB's hover lift is the only animation here. */ @media (prefers-reduced-motion: reduce) { [data-theme="prism"] .prism-nav-scan { transition: none; } [data-theme="prism"] .prism-nav-scan:hover { transform: none; } } /* ── Mock-fidelity chrome (mobile <1024px): compact brand row, game-chip rail, horizontal era-card rail — matches the mock's phone frames. ───────────── */ @media (max-width: 1023.98px) { /* Compact brand row instead of the big SVG banner (mock screen 1). */ [data-theme="prism"] header { padding: 12px 16px; text-align: left; } [data-theme="prism"] .header-logo { display: none; } [data-theme="prism"] .header-badge { width: 38px; height: 38px; } [data-theme="prism"] .logo-link { gap: 10px; } [data-theme="prism"] .header-lockup { display: flex; flex-direction: column; line-height: 1.02; text-align: left; } [data-theme="prism"] .header-lockup-title { font-family: var(--prism-sans); font-size: 1rem; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; color: var(--prism-gold); text-shadow: 0 0 1px rgba(255, 240, 200, 0.7); } [data-theme="prism"] .header-lockup-sub { font-family: var(--prism-mono); font-size: 0.5rem; font-weight: 700; letter-spacing: 4.5px; text-transform: uppercase; color: var(--prism-gold); opacity: 0.78; margin-top: 3px; } /* Game switcher as a horizontal scrollable chip rail (mock's tcg chips). */ [data-theme="prism"] .top-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 7px; background: transparent; border: none; padding: 2px 2px 6px; border-radius: 0; box-shadow: none; } [data-theme="prism"] .top-tabs::-webkit-scrollbar { display: none; } [data-theme="prism"] .top-tab { flex: 0 0 auto; padding: 8px 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--holo-line); } /* Global-search entry pill keeps its gold primary treatment among the translucent game chips (the .top-tab chip recolor above would mute it). order:-1 puts it FIRST on this horizontally-scrollable rail — at the end it scrolls out of the initial viewport, defeating quick on-the-go access. */ [data-theme="prism"] .top-tab-search { order: -1; background: linear-gradient(135deg, #ffd700 0%, #ff9500 100%); border-color: rgba(255, 215, 0, 0.6); color: #1a1026; box-shadow: 0 0 14px rgba(255, 200, 60, 0.35); } [data-theme="prism"] .top-tab.active { background: linear-gradient(120deg, rgba(182, 140, 255, 0.28), rgba(255, 122, 182, 0.16)); border-color: rgba(182, 140, 255, 0.5); box-shadow: 0 0 16px rgba(182, 140, 255, 0.25); } [data-theme="prism"] .top-tab-logo { height: 22px; width: auto; max-width: 110px; } /* Era cards as a horizontal snap rail (mock Browse screen). */ [data-theme="prism"] .block-buttons { display: flex; flex-wrap: nowrap; justify-content: flex-start; /* base centers; centered overflow hides the rail start */ overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: none; /* base snap causes an initial mid-rail jump */ scrollbar-width: none; gap: 10px; padding-bottom: 6px; } [data-theme="prism"] .block-buttons::-webkit-scrollbar { display: none; } [data-theme="prism"] .block-buttons .block-btn { flex: 0 0 240px; scroll-snap-align: start; } } /* Desktop (≥1024px): the sidebar carries the brand — hide the banner header entirely so the main column starts at the user bar + content (mock). */ @media (min-width: 1024px) { [data-theme="prism"] header { display: none; } } /* body is a column flexbox and .container uses auto inline margins, which disable flex stretching — the container shrink-wraps to its widest child. With the banner header + top-tab rail hidden under PRISM, nothing wide is left, so pin the container to the full (max-width-capped) column. */ [data-theme="prism"] .container { width: 100%; box-sizing: border-box; } /* ── Sidebar YOUR GAMES rows — official wordmark images (names stay as the accessible label / test hook; restored if the image fails). ──────────── */ [data-theme="prism"] .prism-side-game-logo { display: block; height: 22px; max-width: 130px; object-fit: contain; flex: 0 0 auto; } [data-theme="prism"] .prism-side-game .prism-side-game-name { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } [data-theme="prism"] .prism-side-game { position: relative; } [data-theme="prism"] .prism-side-game-pct { margin-left: auto; } [data-theme="prism"] .prism-side-game.tab-logo-failed .prism-side-game-logo { display: none; } [data-theme="prism"] .prism-side-game.tab-logo-failed .prism-side-game-name { position: static !important; width: auto !important; height: auto !important; margin: 0 !important; overflow: visible !important; clip: auto !important; white-space: nowrap !important; flex: 1; } /* @prism-s9:end */ /* ───────────────────────────────────────────────────────────────────────────── * S10 · Compact density pass — use the full viewport, cut scrolling. * * Owner ask: minimize vertical + horizontal scrolling on both mobile and * desktop. Four levers, all PRISM-scoped: * 1. Desktop set rail: the S3 single-column list wastes the wide main * column — pack the same list rows into an auto-fill grid (2–3 across). * 2. Desktop card grid: tighter minmax so more cards fit per row. * 3. Era grid: drop Holofoil's 240px track cap so tiles stretch to fill * the row (no dead right gutter), with tighter tile padding. * 4. Trim instructional helper-text + mobile padding (the compact header, * chip rail and 3-up card grid already come from S9 / base mobile CSS). * ──────────────────────────────────────────────────────────────────────────── */ /* @prism-s10:begin — compact density (mobile + desktop) */ /* 4 · The era header line ("// ERA · N sets") already says what to do; the extra instructional line just pushes content down. */ [data-theme="prism"] .helper-text { display: none; } /* 3 · Era tiles — fill the full row width (auto-fit stretches the last row tracks; Holofoil caps tracks at 240px which leaves a dead right gutter), and tighten the tile interior. Desktop only — mobile uses the S9 rail. */ @media (min-width: 1024px) { [data-theme="prism"] .block-buttons { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important; gap: 8px !important; } [data-theme="prism"] .block-btn { padding: 10px 12px !important; } /* 1 · Set rail — same list-row tiles, packed 2–3 across instead of one long single column. Beats the S3 flex-column override by source order (equal specificity + !important). */ [data-theme="prism"] #pokemon-tcg-content .set-buttons.active, [data-theme="prism"] #lorcana-content .set-buttons, [data-theme="prism"] #mtg-content .set-buttons, [data-theme="prism"] #union-arena-content .set-buttons, [data-theme="prism"] #dragonball-content .set-buttons.active, [data-theme="prism"] #custom-sets-content .set-buttons { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)) !important; gap: 7px !important; align-items: stretch !important; } /* 2 · Card grid — a notch denser than the base 160px tracks. */ [data-theme="prism"] .card-grid { grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); gap: 7px; } } /* 4 · Mobile trims — reclaim the frame padding; the 3-up card grid + 4px gap already come from the base ≤768px rules. */ @media (max-width: 1023.98px) { [data-theme="prism"] .container { padding: 6px; } [data-theme="prism"] header { margin-bottom: 8px; } [data-theme="prism"] .top-tabs { margin-bottom: 8px; } [data-theme="prism"] .block-buttons { margin-bottom: 10px; } } /* @prism-s10:end */