:root {
  --bg: #fafafa;
  --surface: #ffffff;
  --ink: #131313;
  --ink-dim: rgba(19, 19, 19, 0.68);
  --ink-faint: rgba(19, 19, 19, 0.45);
  --border: rgba(19, 19, 19, 0.12);
  --border-strong: rgba(19, 19, 19, 0.2);
  --accent: #2e5bff;
  --accent-2: #7c3aed;

  --heading-font: "Archivo", sans-serif;
  --mono-font: "IBM Plex Mono", monospace;
  --body-font:
    "Helvetica Neue", Arial, sans-serif;

  /* Card-face dark theme (cards stay rich/dark even on the light site,
     same convention every real card-pack app uses) */
  --card-bg: #1b1f2a;
  --card-photo-bg: #0e1016;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body-font);
  min-height: 100vh;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
}

.wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono-font);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

.eyebrow.is-accent {
  color: var(--accent);
}

/* Header */

.site-header {
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(250, 250, 250, 0.9);
  backdrop-filter: blur(8px);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
  flex-wrap: wrap;
  gap: 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--heading-font);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.01em;
}

.brand-mark {
  font-size: 18px;
}

.brand-flag {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent var(--accent);
}

.header-right {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

.main-nav {
  display: flex;
  gap: 26px;
  font-family: var(--mono-font);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.main-nav a {
  color: var(--ink);
  opacity: 0.65;
  transition: opacity 0.15s ease;
}

.main-nav a:hover,
.main-nav a.is-active {
  opacity: 1;
}

.back-to-portfolio {
  font-family: var(--mono-font);
  font-size: 12px;
  letter-spacing: 0.06em;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 9px 16px;
  white-space: nowrap;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease;
}

.back-to-portfolio:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--bg);
}

/* Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--mono-font);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 14px 26px;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.btn:hover:not(:disabled) {
  transform: translateY(-1px);
}

.btn-primary {
  background: var(--accent);
  color: var(--bg);
  box-shadow: 0 8px 18px rgba(46, 91, 255, 0.3);
}

.btn-primary:hover:not(:disabled) {
  background: #1f49ee;
}

.btn-secondary {
  border-color: var(--border-strong);
  color: var(--ink);
  background: transparent;
}

.btn-secondary:hover:not(:disabled) {
  border-color: var(--ink);
}

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

/* Hero */

.hero {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
  padding: 56px 0 88px;
}

.hero h1 {
  font-family: var(--heading-font);
  font-weight: 800;
  font-size: clamp(40px, 6vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 20px 0;
}

.hero p {
  font-size: 18px;
  line-height: 1.6;
  opacity: 0.72;
  max-width: 460px;
  margin: 0 0 32px;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.hero-actions .link-arrow {
  font-family: var(--mono-font);
  font-size: 13px;
  font-weight: 500;
}

.hero-meta {
  font-family: var(--mono-font);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.45;
}

.hero-stage {
  position: relative;
  height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-stage .pack-visual {
  position: absolute;
}

.hero-pack-1 {
  transform: rotate(-16deg) translate(-90px, 10px);
}

.hero-pack-2 {
  transform: rotate(10deg) translate(90px, 20px);
}

.hero-pack-3 {
  z-index: 2;
}

@media (max-width: 860px) {
  .hero {
    grid-template-columns: 1fr;
  }
  .hero-stage {
    height: 320px;
  }
}

/* Section headings */

.section-eyebrow {
  font-family: var(--mono-font);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.5;
  margin-bottom: 14px;
}

.section-title {
  font-family: var(--heading-font);
  font-weight: 800;
  font-size: clamp(28px, 4vw, 40px);
  letter-spacing: -0.01em;
  margin: 0 0 40px;
}

.page-section {
  padding: 64px 0;
}

.page-section.is-tight {
  padding-top: 40px;
}

/* Sports grid (home) */

.sports-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.sport-feature-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 28px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: transparent;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.sport-feature-card:hover {
  background: var(--accent);
  border-color: var(--accent);
}

.sport-feature-card i {
  font-size: 30px;
  color: #131313;
  transition: color 0.2s ease;
}

.sport-feature-card:hover i {
  color: #fafafa;
}

.sport-feature-card .name {
  font-family: var(--heading-font);
  font-weight: 700;
  font-size: 19px;
  transition: color 0.2s ease;
}

.sport-feature-card:hover .name {
  color: #fafafa;
}

.sport-feature-card p {
  font-size: 14px;
  opacity: 0.68;
  line-height: 1.5;
  margin: 0;
  transition: color 0.2s ease;
}

.sport-feature-card:hover p {
  color: #fafafa;
}

.sport-feature-card .link-arrow {
  font-family: var(--mono-font);
  font-size: 11px;
  letter-spacing: 0.08em;
  margin-top: auto;
  transition: color 0.2s ease;
}

.sport-feature-card:hover .link-arrow {
  color: #fafafa;
}

@media (max-width: 860px) {
  .sports-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Pack visual (pennant card) — the signature component of the static
   marketing hero on index.html: a rounded card with a top "grommet", a
   colored pennant/flag shape, and a diagonal shine overlay, tinted per
   tier. The interactive pack grid and opening animation use the real 3D
   version instead (see .pack-visual-3d below and pack-3d.js). */

.pack-visual {
  --pack-ink: #131313;
  position: relative;
  width: 170px;
  height: 255px;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 16px 12px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: var(--pack-ink);
}

.pack-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.45) 50%, transparent 60%);
  pointer-events: none;
}

/* A real 3D object (see pack-3d.js) instead of the flat pennant card —
   just a sized, rounded frame with a drop shadow; the box mesh, tier
   colors, and printed label are all rendered into the canvas filling it. */
.pack-visual-3d {
  display: block;
  padding: 0;
  border: none;
  background-image: none;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}

.pack-visual-3d::before {
  content: none;
}

.pack-visual-3d canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* The 3D model has no UVs to paint a label texture onto, so the pack
   number/sport/tier name sit on top as a plain HTML overlay instead. */
.pack-3d-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: #fafafa;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}

.pack-3d-number {
  position: absolute;
  top: 14px;
  left: 16px;
  font-family: var(--mono-font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  opacity: 0.8;
}

.pack-3d-sport {
  position: absolute;
  top: 10px;
  right: 14px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  text-shadow: none;
}

.pack-3d-tier {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.pack-3d-tier strong {
  font-family: var(--heading-font);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.02em;
  font-style: normal;
}

.pack-3d-tier em {
  font-family: var(--mono-font);
  font-size: 10px;
  letter-spacing: 0.14em;
  opacity: 0.75;
  font-style: normal;
}

.pack-grommet {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--bg);
  z-index: 2;
}

.pack-visual-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  z-index: 1;
}

.pack-number {
  font-family: var(--mono-font);
  font-size: 11px;
  letter-spacing: 0.08em;
  opacity: 0.75;
}

.pack-sport-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #131313;
}

.pack-pennant {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 13px 0 13px 22px;
  border-color: transparent transparent transparent var(--pack-ink);
  z-index: 1;
}

.pack-visual-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  z-index: 1;
}

.pack-tier-name {
  font-family: var(--heading-font);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.02em;
}

.pack-tier-sub {
  font-family: var(--mono-font);
  font-size: 9px;
  letter-spacing: 0.14em;
  opacity: 0.6;
}

.pack-visual-bronze {
  --pack-ink: #fafafa;
  background-image: linear-gradient(160deg, #d9ae79, #a8723a);
}

.pack-visual-silver {
  background-image: linear-gradient(160deg, #f1f1f2, #b7b8bc);
  box-shadow: 0 10px 22px rgba(90, 90, 100, 0.25);
}

.pack-visual-gold {
  background-image: linear-gradient(160deg, #fbe29a, #c99a3e);
  box-shadow: 0 12px 26px rgba(201, 154, 62, 0.4);
}

.pack-visual-legendary {
  --pack-ink: #fafafa;
  width: 180px;
  height: 270px;
  background-image: linear-gradient(160deg, #bfd0ff, #2e5bff 55%, #131313 150%);
  box-shadow:
    0 0 36px rgba(46, 91, 255, 0.5),
    0 16px 28px rgba(0, 0, 0, 0.22);
  border: 1.5px solid #2e5bff;
}

.pack-visual-legendary::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.18) 0 2px, transparent 2px 9px);
  pointer-events: none;
}

/* That pinstripe flair was tuned for the flat 2D pennant card — over the
   real 3D model it just reads as a stray grid pattern, so suppress it there. */
.pack-visual-3d.pack-visual-legendary::after {
  content: none;
}

.hero-pack-1.pack-visual-silver {
  width: 170px;
  height: 255px;
}
.hero-pack-2.pack-visual-gold {
  width: 180px;
  height: 270px;
}
.hero-pack-3.pack-visual-legendary {
  width: 210px;
  height: 315px;
}

/* Packs grid (home preview + the real /packs.html page) */

.packs-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  align-items: end;
}

.pack-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.pack-column-info {
  text-align: center;
  width: 100%;
}

.pack-column-name {
  font-family: var(--heading-font);
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 6px;
}

.pack-column-desc {
  font-size: 13px;
  opacity: 0.65;
  margin-bottom: 14px;
}

.pack-column.is-legendary .pack-column-name {
  color: var(--accent);
}

@media (max-width: 860px) {
  .packs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Odds chips + pool note (functional /packs.html page) */

.pool-note {
  font-family: var(--mono-font);
  font-size: 12px;
  opacity: 0.5;
  margin: -20px 0 24px;
}

/* Odds live behind a "See odds" popup instead of always showing — the
   pack column itself stays short and scannable. */
.odds-popup-trigger {
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  margin-bottom: 14px;
  font-family: var(--mono-font);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.odds-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 12, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 24px;
}

.odds-overlay[hidden] {
  display: none;
}

.odds-popup {
  position: relative;
  width: 100%;
  max-width: 360px;
  background: var(--surface);
  border-radius: 16px;
  padding: 28px 24px 24px;
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.35);
}

.odds-popup-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: var(--border);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  color: var(--ink);
}

.odds-popup-title {
  font-family: var(--heading-font);
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 6px;
}

.odds-popup-sub {
  font-size: 12px;
  opacity: 0.65;
  line-height: 1.5;
  margin: 0 0 16px;
}

.tier-odds-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-bottom: 14px;
}

.rarity-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--mono-font);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--chip-color, var(--accent)) 14%, transparent);
  color: var(--chip-color, var(--accent));
}

.pack-column-status {
  font-family: var(--mono-font);
  font-size: 11px;
  opacity: 0.55;
  margin-bottom: 10px;
}

.pack-column-status.is-ready {
  color: #1a9c53;
  opacity: 1;
}

/* Sport tabs */

.sport-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.sport-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--ink);
  opacity: 0.65;
  font-family: var(--mono-font);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

.sport-tab .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sport-accent, var(--accent));
}

.sport-tab.is-active {
  opacity: 1;
  color: var(--bg);
  background: var(--ink);
  border-color: var(--ink);
}

.sport-tab.is-active .dot {
  background: var(--bg);
}

/* Reveal modal — kept as a dark "stage" overlay for the reveal moment,
   deliberately distinct from the light site chrome (same convention every
   pack-opening app uses: a spotlight moment on a dark backdrop). */

.reveal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 12, 0.92);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 24px;
}

.reveal-overlay[hidden] {
  display: none;
}

.reveal-panel {
  width: 100%;
  max-width: 900px;
  text-align: center;
}

.reveal-panel h2 {
  font-family: var(--heading-font);
  margin: 0 0 24px;
  font-size: 20px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
}

/* Pack-opening animation: a shake while openPack()/preloadCardImages() run
   in the background, then a quick "burst" the instant they resolve, before
   handing off to the existing card-by-card reveal. Fills wait time that
   was previously just an unchanging "Opening…" button label. */

.reveal-opening {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.reveal-opening[hidden] {
  display: none;
}

.reveal-opening-label {
  font-family: var(--mono-font);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

@keyframes pack-shake {
  0%,
  100% {
    transform: rotate(0deg) scale(1);
  }
  10% {
    transform: rotate(-4deg) scale(1.02);
  }
  20% {
    transform: rotate(4deg) scale(1.02);
  }
  30% {
    transform: rotate(-4deg) scale(1.03);
  }
  40% {
    transform: rotate(4deg) scale(1.03);
  }
  50% {
    transform: rotate(-3deg) scale(1.02);
  }
  60% {
    transform: rotate(3deg) scale(1.02);
  }
  70% {
    transform: rotate(-2deg) scale(1.01);
  }
  80% {
    transform: rotate(2deg) scale(1.01);
  }
  90% {
    transform: rotate(-1deg) scale(1);
  }
}

#reveal-opening-pack .pack-visual.is-shaking {
  animation: pack-shake 0.55s ease-in-out infinite;
}

@keyframes pack-burst {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  55% {
    transform: scale(1.3);
    opacity: 1;
  }
  100% {
    transform: scale(1.7);
    opacity: 0;
  }
}

#reveal-opening-pack .pack-visual.is-bursting {
  animation: pack-burst 0.38s ease-out forwards;
}

.reveal-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.reveal-cards {
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
  min-width: 170px;
}

.reveal-arrow {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: #fafafa;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    opacity 0.15s ease;
}

.reveal-arrow:hover:not(:disabled) {
  background: var(--accent);
  border-color: var(--accent);
}

.reveal-arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.reveal-dots {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.reveal-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    transform 0.15s ease;
}

.reveal-dot.is-viewed {
  background: rgba(255, 255, 255, 0.5);
}

.reveal-dot.is-active {
  background: var(--accent);
  transform: scale(1.3);
}

.reveal-actions {
  margin-top: 32px;
}

/* Card component (the actual collectible) */

.card {
  width: 170px;
  aspect-ratio: 5 / 7;
  position: relative;
  opacity: 0;
  transform: translateY(16px) scale(0.94);
  animation: card-in 0.5s ease forwards;
  perspective: 900px;
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.45);
}

.card.is-flippable {
  cursor: pointer;
}

@keyframes card-in {
  to {
    opacity: 1;
    transform: none;
  }
}

/* Click-to-flip: two faces stacked in 3D, the flipper rotates 180° and
   each face hides its own backside so only one is ever visible. The
   border lives HERE (not on .card) so it's treated as part of the card
   itself and physically rotates along with it, instead of sitting still
   as a frame while the content spins inside it. */
.card-flipper {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 0;
  background: var(--card-bg);
  border: 10px solid #fafafa;
  /* No overflow:hidden here on purpose — the vertical team name and the
     team logo are both designed to spill onto this border, and clipping
     at the card's own box would cut them off right where they're
     supposed to show. .card-photo still clips the photo itself. */
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
}

/* Numbered parallels (Topps Chrome-style "rainbow") — the tier-colored
   frame wraps the WHOLE card (photo + nameplate) evenly on all sides,
   replacing the plain white base-card border, so the color runs the
   full square contour with no gap and the card sits centered inside it. */
.card.is-numbered .card-flipper {
  border-color: var(--numbered-color);
  border-width: 12px;
}

.card.is-superfractor .card-flipper {
  animation: superfractor-shimmer 1.8s ease-in-out infinite 0.5s;
}

@keyframes superfractor-shimmer {
  0%,
  100% {
    border-color: #f4d35e;
  }
  25% {
    border-color: #ff6b6b;
  }
  50% {
    border-color: #4dd0e1;
  }
  75% {
    border-color: #ba68c8;
  }
}

.card.is-flipped .card-flipper {
  transform: rotateY(180deg);
}

.card-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
}

.card-face-back {
  transform: rotateY(180deg);
  background: var(--card-bg);
  padding: 16px 14px;
  justify-content: center;
}

.card-back-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.card-back-name {
  font-family: var(--heading-font);
  color: #fafafa;
  font-size: 17px;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.15;
}

.card-back-rows {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 10px;
  margin: 0;
}

.card-back-rows dt {
  font-family: var(--mono-font);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.5);
}

.card-back-rows dd {
  margin: 0;
  font-family: var(--mono-font);
  font-size: 12px;
  color: #fafafa;
}

.card-back-hint {
  margin-top: 4px;
  font-family: var(--mono-font);
  font-size: 10px;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.4);
}

.card-photo {
  position: relative;
  flex: 1;
  background: var(--card-photo-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* MLB headshots (see card-render.js) — framing varies too much player to
   player for any single crop to be safe, so these are never cropped;
   the backdrop matches MLB's own studio background so letterboxing on a
   tightly-framed photo blends in instead of showing a mismatched box. */
.card-photo.is-contained {
  background: #c9cdd8;
}

.card-photo.is-contained img {
  object-fit: contain;
  object-position: center;
}

.card-photo .initials {
  font-family: var(--heading-font);
  font-size: 40px;
  font-weight: 800;
  color: #6b7280;
  opacity: 0.6;
}

/* Team nickname running up the left edge of the card, Topps Chrome-style.
   It spans the FULL front face (photo + nameplate), not just the photo —
   a bigger, bolder name is allowed to run right over the nameplate color
   when it needs the room, rather than being confined to the picture. */
/* Straddles the border/photo seam: half its width sits on the card's own
   border, half on the image, instead of living purely inside one or the
   other. */
.card-team-vertical {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -7px;
  width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--heading-font);
  font-size: 21px;
  font-weight: 800;
  font-style: italic;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fafafa;
  -webkit-text-stroke: 1.5px #000;
  paint-order: stroke fill;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
}

/* Compact nameplate footer — the team itself is already carried by the
   vertical nameplate on the photo plus the logo, so this row only needs
   to fit the player's stacked first/last name and the logo mark. */
.card-info {
  --team-color: #1b1f2a;
  padding: 6px 10px 7px;
  display: flex;
  align-items: center;
  gap: 20px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0.68) 100%),
    var(--team-color);
}

.card-name-block {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Small, light-weight first name over a bold, italic surname — the
   Topps Chrome "nameplate" look. */
.card-name-first {
  font-family: var(--heading-font);
  color: rgba(255, 255, 255, 0.8);
  font-size: 10px;
  font-weight: 600;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.1;
}

.card-name-last {
  font-family: var(--heading-font);
  color: #fafafa;
  font-size: 17px;
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Scaled up visually (rather than given a bigger layout box) so it reads
   bigger without eating into the name column's width. Anchored bottom-left
   (roughly where it naturally sits) so the enlargement grows up and to the
   right, over the seam between the border and the photo above it. */
.team-logo {
  width: 30px;
  height: 30px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));
  transform: scale(1.55) translate(-10px, 4px);
  transform-origin: bottom left;
  z-index: 1;
}

.team-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.card-position-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  font-family: var(--mono-font);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 2px 7px;
  border-radius: 999px;
  color: #fafafa;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.card-rookie-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  font-family: var(--mono-font);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 2px 7px;
  border-radius: 999px;
  background: #7ee787;
  color: #0b0d12;
}

.card-new-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  font-family: var(--mono-font);
  font-size: 10px;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 999px;
  background: #fafafa;
  color: #0b0d12;
}

.card-new-badge.has-rookie-above,
.card-dupe-badge.has-rookie-above {
  top: 32px;
}

.card-dupe-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  font-family: var(--mono-font);
  font-size: 10px;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
  color: #fafafa;
}

.card.is-locked {
  opacity: 0.4;
  animation: none;
}

/* Collection page */

.collection-summary {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.progress-track {
  flex: 1;
  min-width: 200px;
  height: 8px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 999px;
  transition: width 0.4s ease;
}

.collection-count {
  font-family: var(--mono-font);
  font-weight: 500;
  white-space: nowrap;
}

.variation-filters {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.variation-filter {
  cursor: pointer;
  border: 1px solid var(--border-strong);
  background: transparent;
}

.variation-filter.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.collection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
}

/* Numbered library page */

.numbered-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 24px 16px;
}

.numbered-entry .card {
  width: 100%;
  animation: none;
  opacity: 1;
  transform: none;
  margin: 0 auto;
}

.numbered-entry-label {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: center;
  font-family: var(--mono-font);
}

.numbered-entry-label strong {
  font-size: 13px;
  letter-spacing: 0.02em;
}

.numbered-entry-label span {
  font-size: 11px;
  opacity: 0.6;
}

.collection-grid .card {
  width: 100%;
  animation: none;
  opacity: 1;
  transform: none;
  margin: 0 auto;
}

.owned-count {
  position: absolute;
  bottom: 10px;
  right: 8px;
  font-family: var(--mono-font);
  font-size: 11px;
  font-weight: 500;
  background: rgba(0, 0, 0, 0.55);
  color: #fafafa;
  padding: 2px 7px;
  border-radius: 999px;
}

/* Sits directly on the picture (bottom-right), showing just the print
   run — the ring color already tells you which tier it is, so the label
   would be redundant. */
.card-serial-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  font-family: var(--mono-font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #d4af37;
  white-space: nowrap;
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.85),
    0 0 8px rgba(0, 0, 0, 0.6);
}

/* ============================================================
   Design-only variations — a "base" pull can instead come out as
   one of these. None of them change who the player is; they're
   the equivalent of a Topps parallel with no serial number attached.
   Sepia and Skyline are the only two that carry a text label — every
   other variation is meant to read purely from its visual treatment.
   ============================================================ */

.card-variation-label {
  position: absolute;
  bottom: 8px;
  right: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.variation-label-sepia {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  color: #f4e3c1;
  background: rgba(84, 58, 24, 0.75);
  transform: rotate(-3deg);
}

.variation-label-skyline {
  font-family: var(--mono-font);
  text-transform: uppercase;
  color: #dff3ff;
  background: rgba(10, 20, 40, 0.7);
}

/* Sepia/Vintage — desaturated, warm-toned photo. */
.card.variation-sepia .card-photo img {
  filter: sepia(0.85) contrast(1.05) brightness(0.95) saturate(1.1);
}

/* Negative — a classic black-and-white film-negative look (grayscale
   first, then invert), not a full color invert, which reads as a garish
   green/purple mess on skin tones no matter how it's tuned. */
.card.variation-negative .card-photo img {
  filter: grayscale(1) invert(1) contrast(1.1);
}

/* Holo — an animated rainbow diagonal sweep across the photo. */
.card.variation-holo .card-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(115deg, #ff3b3b 0%, #ffb03b 12%, #f7ff3b 24%, #3bff6a 36%, #3bd4ff 48%, #7a3bff 60%, #ff3b3b 72%);
  background-size: 220% 220%;
  mix-blend-mode: color-dodge;
  opacity: 0.55;
  animation: holo-sweep 5s linear infinite;
  pointer-events: none;
}

@keyframes holo-sweep {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 100% 100%;
  }
}

/* Foil — a metallic silver sheen sweeping across the photo. */
.card.variation-foil .card-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.9) 50%, transparent 65%);
  background-size: 250% 250%;
  mix-blend-mode: overlay;
  animation: foil-sweep 2.6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes foil-sweep {
  0%,
  100% {
    background-position: 0% 0%;
  }
  50% {
    background-position: 100% 100%;
  }
}

/* Camo — the card's own border becomes a camo pattern instead of plain
   white. A solid layer clipped to the content area (padding-box) sits on
   top of the pattern layer clipped to the full card (border-box), so the
   pattern only shows through in the border strip itself. */
.card.variation-camo .card-flipper {
  border-color: transparent;
  background-image:
    linear-gradient(var(--card-bg), var(--card-bg)),
    radial-gradient(circle at 18% 28%, #4b5320 15%, transparent 16%),
    radial-gradient(circle at 58% 12%, #333b16 13%, transparent 14%),
    radial-gradient(circle at 82% 55%, #6b7a3a 15%, transparent 16%),
    radial-gradient(circle at 25% 82%, #4b5320 17%, transparent 18%),
    radial-gradient(circle at 90% 90%, #2f3613 13%, transparent 14%),
    linear-gradient(#5c6b2f, #5c6b2f);
  background-origin: padding-box, border-box, border-box, border-box, border-box, border-box, border-box;
  background-clip: padding-box, border-box, border-box, border-box, border-box, border-box, border-box;
}

/* Ball — same border trick as Camo, but a basketball-orange ground with a
   crossed-seam grid standing in for stitching. */
.card.variation-ball .card-flipper {
  border-color: transparent;
  background-image:
    linear-gradient(var(--card-bg), var(--card-bg)),
    repeating-linear-gradient(90deg, transparent 0 9px, #1a1006 9px 10px),
    repeating-linear-gradient(0deg, transparent 0 9px, #1a1006 9px 10px),
    linear-gradient(#d9701e, #d9701e);
  background-origin: padding-box, border-box, border-box, border-box;
  background-clip: padding-box, border-box, border-box, border-box;
}

/* Sketch — grayscale, high-contrast, pencil-drawing feel. */
.card.variation-sketch .card-photo img {
  filter: grayscale(1) contrast(1.5) brightness(1.1);
}

.card.variation-sketch .card-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.08) 0 2px, transparent 2px 5px);
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* Skyline — a generic city silhouette along the bottom of the photo,
   plus the "CITY ICON" label (see .variation-label-skyline above). */
.card.variation-skyline .card-photo::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 45%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 100' preserveAspectRatio='none'%3E%3Crect x='0' y='60' width='20' height='40' fill='%230a1428'/%3E%3Crect x='22' y='40' width='16' height='60' fill='%230a1428'/%3E%3Crect x='40' y='55' width='14' height='45' fill='%230a1428'/%3E%3Crect x='56' y='30' width='18' height='70' fill='%230a1428'/%3E%3Crect x='76' y='50' width='12' height='50' fill='%230a1428'/%3E%3Crect x='90' y='20' width='20' height='80' fill='%230a1428'/%3E%3Crect x='112' y='45' width='16' height='55' fill='%230a1428'/%3E%3Crect x='130' y='60' width='14' height='40' fill='%230a1428'/%3E%3Crect x='146' y='35' width='18' height='65' fill='%230a1428'/%3E%3Crect x='166' y='55' width='12' height='45' fill='%230a1428'/%3E%3Crect x='180' y='25' width='22' height='75' fill='%230a1428'/%3E%3Crect x='204' y='48' width='16' height='52' fill='%230a1428'/%3E%3Crect x='222' y='60' width='14' height='40' fill='%230a1428'/%3E%3Crect x='238' y='38' width='18' height='62' fill='%230a1428'/%3E%3Crect x='258' y='55' width='12' height='45' fill='%230a1428'/%3E%3Crect x='272' y='42' width='16' height='58' fill='%230a1428'/%3E%3Crect x='290' y='58' width='10' height='42' fill='%230a1428'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  opacity: 0.85;
  pointer-events: none;
}

/* Glitch — RGB-split echoes of the same photo, tinted red/cyan via
   background-blend-mode and screened back on top, each jittering on its
   own offset. --photo-src is kept in sync with the real <img> by
   card-render.js since a pseudo-element can't read the element directly. */
.card.variation-glitch .card-photo::before,
.card.variation-glitch .card-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--photo-src);
  background-size: cover;
  background-position: top;
  mix-blend-mode: screen;
  opacity: 0.75;
  pointer-events: none;
}

.card.variation-glitch .card-photo::before {
  background-color: #ff003c;
  background-blend-mode: multiply;
  animation: glitch-shift-a 2.4s infinite steps(1, end);
}

.card.variation-glitch .card-photo::after {
  background-color: #00e5ff;
  background-blend-mode: multiply;
  animation: glitch-shift-b 2.4s infinite steps(1, end);
}

@keyframes glitch-shift-a {
  0%,
  100% {
    transform: translate(0, 0);
  }
  20% {
    transform: translate(-4px, 1px);
  }
  40% {
    transform: translate(2px, 0);
  }
  60% {
    transform: translate(-3px, -1px);
  }
  80% {
    transform: translate(0, 0);
  }
}

@keyframes glitch-shift-b {
  0%,
  100% {
    transform: translate(0, 0);
  }
  20% {
    transform: translate(4px, -1px);
  }
  40% {
    transform: translate(-2px, 0);
  }
  60% {
    transform: translate(3px, 1px);
  }
  80% {
    transform: translate(0, 0);
  }
}

#collection-search {
  font-family: var(--body-font);
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14px;
}

/* Lineup page */

.lineup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
}

.lineup-slot {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.lineup-slot-label {
  font-family: var(--mono-font);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--accent);
}

.lineup-slot-card {
  width: 100%;
  display: flex;
  justify-content: center;
}

.lineup-slot-card .card {
  width: 100%;
  animation: none;
  opacity: 1;
  transform: none;
}

.lineup-slot-empty {
  width: 100%;
  aspect-ratio: 5 / 7;
  border: 2px dashed var(--border-strong);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-faint);
  font-size: 13px;
}

.lineup-slot-action {
  width: 100%;
  font-family: var(--mono-font);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 9px 10px;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease;
}

.lineup-slot-action:hover:not(:disabled) {
  border-color: var(--ink);
}

.lineup-slot-action:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Player picker — a dedicated full screen instead of a native <select>,
   since eligible-card lists can run into the hundreds once a collection
   grows (a broad position like NFL "S" maps to both FS and SS). */

.picker-overlay {
  position: fixed;
  inset: 0;
  background: rgba(19, 19, 19, 0.55);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 110;
  padding: 40px 24px;
  overflow-y: auto;
}

.picker-overlay[hidden] {
  display: none;
}

.picker-panel {
  background: var(--surface);
  border-radius: 16px;
  max-width: 920px;
  width: 100%;
  padding: 32px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
}

.picker-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
}

.picker-close {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--ink);
  font-size: 15px;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

.picker-close:hover {
  background: var(--ink);
  color: var(--bg);
}

.picker-clear-btn {
  margin-bottom: 20px;
}

.picker-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.picker-toolbar label {
  font-family: var(--mono-font);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.5;
}

.picker-toolbar select {
  font-family: var(--mono-font);
  font-size: 12px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
}

.picker-toolbar[hidden] {
  display: none;
}

.picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 14px;
  max-height: 55vh;
  overflow-y: auto;
  padding: 4px 4px 8px;
}

.picker-card-btn {
  all: unset;
  display: block;
  cursor: pointer;
  border-radius: 18px;
  outline-offset: 3px;
  transition: outline-color 0.15s ease;
}

.picker-card-btn .card {
  width: 100%;
  animation: none;
  opacity: 1;
  transform: none;
}

.picker-card-btn.is-selected {
  outline: 3px solid var(--accent);
}

.picker-empty-state {
  font-family: var(--mono-font);
  font-size: 13px;
  opacity: 0.55;
  text-align: center;
  padding: 32px 0;
}

/* Grading page */

.grade-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.grade-section-header h3 {
  font-family: var(--heading-font);
  font-size: 18px;
  font-weight: 800;
  margin: 0;
}

.grade-queue {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}

.grade-queue-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.grade-queue-name {
  font-family: var(--heading-font);
  font-weight: 700;
  flex: 1;
}

.grade-queue-status {
  font-family: var(--mono-font);
  font-size: 12px;
  opacity: 0.6;
  white-space: nowrap;
}

.grade-queue-status.is-ready {
  opacity: 1;
  color: var(--accent);
}

.grade-empty {
  font-family: var(--mono-font);
  font-size: 13px;
  opacity: 0.55;
  padding: 20px 0;
}

.grade-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 24px;
}

/* PSA-style graded slab — Draft's own colors/branding, not a literal
   PSA replica, but the same information layout: set/year, name, and
   variation on one side of the label; card number, grade name, and
   grade on the other; barcode and cert number along the bottom. */

.grade-slab {
  width: 100%;
  max-width: 230px;
  margin: 0 auto;
  background: linear-gradient(155deg, #f1f2f4, #c7c9cd);
  border-radius: 20px;
  padding: 12px;
  box-shadow:
    0 20px 40px -16px rgba(0, 0, 0, 0.4),
    inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}

.grade-slab-label {
  background: linear-gradient(180deg, #eef8ff, #dcedf9);
  border: 3px solid var(--accent);
  border-radius: 4px;
  padding: 8px 10px 6px;
  margin-bottom: 10px;
  color: #131313;
}

.grade-slab-label-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  text-align: left;
}

.grade-slab-label-col.is-right {
  text-align: right;
  flex: none;
}

.grade-slab-set {
  font-family: var(--mono-font);
  font-size: 9px;
  letter-spacing: 0.03em;
  opacity: 0.7;
}

.grade-slab-name {
  font-family: var(--heading-font);
  font-weight: 800;
  font-size: 13px;
  line-height: 1.2;
  margin-top: 2px;
}

.grade-slab-variation {
  font-family: var(--mono-font);
  font-size: 9px;
  letter-spacing: 0.04em;
  opacity: 0.65;
  margin-top: 2px;
}

.grade-slab-pack {
  font-family: var(--mono-font);
  font-size: 9px;
  letter-spacing: 0.04em;
  opacity: 0.55;
  margin-top: 2px;
}

.grade-slab-number {
  font-family: var(--mono-font);
  font-size: 11px;
  font-weight: 600;
}

.grade-slab-grade-abbr {
  font-family: var(--heading-font);
  font-weight: 800;
  font-size: 13px;
  margin-top: 2px;
}

.grade-slab-grade-number {
  font-family: var(--heading-font);
  font-weight: 800;
  font-size: 20px;
  color: var(--accent);
  line-height: 1;
}

.grade-slab-cert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(19, 19, 19, 0.15);
}

.grade-slab-barcode {
  width: 90px;
  height: 20px;
  display: block;
}

.grade-slab-barcode svg {
  width: 100%;
  height: 100%;
  display: block;
}

.grade-slab-cert-id {
  font-family: var(--mono-font);
  font-size: 9px;
  opacity: 0.7;
  color: #131313;
}

.grade-slab-window {
  background: #0b0d12;
  border-radius: 12px;
  padding: 10px;
  display: flex;
  justify-content: center;
}

/* Footer */

.site-footer {
  border-top: 1px solid var(--border);
  padding: 28px 0;
}

.site-footer .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-note {
  font-family: var(--mono-font);
  font-size: 11px;
  opacity: 0.45;
  text-align: center;
}

@media (max-width: 640px) {
  .main-nav {
    display: none;
  }
}