@layer cards {
  .card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(190px, 42vw), 1fr));
    gap: clamp(0.9rem, 2vw, 1.6rem);
  }

  .card-grid--three { grid-template-columns: repeat(auto-fill, minmax(210px, 260px)); }

  /* ---- The card: a 2.5 x 3.5 portrait, sized by its grid cell; type scales with cqw. ----
     Its layers are coplanar, so the tilt stays flat (no preserve-3d): a 3D rendering context
     drops clip-path and background-clip: text from the layers while tilted in Firefox. */
  .card {
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    --pointer-x: 50%;
    --pointer-y: 50%;
    position: relative;
    display: block;
    aspect-ratio: 5 / 7;
    container-type: inline-size;
    border-radius: var(--radius-card);
    color: #fff;
    text-align: left;
    text-decoration: none;
    transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
    transition: transform 0.25s ease-out, box-shadow 0.25s ease, translate 0.25s ease;
    box-shadow: 0 14px 30px rgb(0 0 0 / 0.45);
  }

  .card:hover { translate: 0 -4px; box-shadow: 0 22px 44px rgb(0 0 0 / 0.55), 0 0 26px color-mix(in srgb, var(--team-accent) 35%, transparent); }
  .card:focus-visible { outline-offset: 5px; }

  .card__frame {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    display: block;
  }

  .card__art, .card__nameplate, .card__position, .card__rating, .card__number,
  .card__logo, .card__caption, .card__label, .card__insert-banner, .card__rookie-shield,
  .card__holo, .card__glare { position: absolute; display: block; }

  .card__headshot { position: absolute; inset: auto 0 0; width: 100%; height: 100%; object-fit: contain; object-position: bottom; }

  .card__first-name, .card__last-name, .card__team { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* Last names shrink to fit: the plate's width over (characters x the font's average uppercase
     width: Exo 2 ~0.66em, Alfa Slab One ~0.78em, rounded up). The ellipsis stays as a backstop. */
  .card__last-name { --name-fit: calc(var(--plate-width) / (var(--name-length, 1) * var(--glyph-width))); }

  /* ---- Modern holo ---- */
  .card--modern .card__frame {
    background:
      linear-gradient(160deg, color-mix(in srgb, var(--team-primary) 85%, #000) 0%, #050814 70%);
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--team-accent) 70%, transparent), inset 0 0 18px color-mix(in srgb, var(--team-accent) 30%, transparent);
  }

  /* Neon lasers: two angled beams across the frame and a geometric corner cut. */
  .card--modern .card__frame::before,
  .card--modern .card__frame::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
  }

  .card--modern .card__frame::before {
    background:
      linear-gradient(108deg, transparent 60.5%, var(--team-accent) 61%, transparent 61.6%),
      linear-gradient(108deg, transparent 64.5%, color-mix(in srgb, var(--team-accent) 55%, transparent) 64.8%, transparent 65.2%),
      linear-gradient(-62deg, transparent 88%, color-mix(in srgb, var(--team-accent) 80%, transparent) 88.4%, transparent 89%);
    filter: drop-shadow(0 0 3px var(--team-accent));
    mix-blend-mode: screen;
  }

  .card--modern .card__frame::after {
    inset: 4cqw;
    border: 1px solid color-mix(in srgb, var(--team-accent) 45%, transparent);
    clip-path: polygon(0 0, 30% 0, 30% 1px, 1px 1px, 1px 18%, 0 18%, 0 82%, 1px 82%, 1px calc(100% - 1px), 22% calc(100% - 1px), 22% 100%, 78% 100%, 78% calc(100% - 1px), calc(100% - 1px) calc(100% - 1px), calc(100% - 1px) 82%, 100% 82%, 100% 18%, calc(100% - 1px) 18%, calc(100% - 1px) 1px, 70% 1px, 70% 0, 100% 0, 100% 100%, 0 100%);
  }

  .card--modern .card__art {
    inset: 0 0 30%;
    background:
      repeating-linear-gradient(108deg, transparent 0 12px, color-mix(in srgb, var(--team-secondary) 14%, transparent) 12px 14px),
      radial-gradient(120% 90% at 50% 100%, color-mix(in srgb, var(--team-primary) 75%, #fff 10%), transparent 70%),
      linear-gradient(180deg, color-mix(in srgb, var(--team-secondary) 35%, var(--team-primary)), var(--team-primary));
    clip-path: polygon(0 0, 100% 0, 100% 86%, 0 100%);
  }

  .card--modern .card__number {
    right: -4cqw;
    top: 2cqw;
    font: italic 900 52cqw/0.85 var(--font-display);
    color: transparent;
    -webkit-text-stroke: 1px color-mix(in srgb, var(--team-accent) 70%, transparent);
    opacity: 0.55;
    letter-spacing: -0.04em;
  }

  .card--modern .card__headshot { filter: drop-shadow(0 6px 10px rgb(0 0 0 / 0.5)); }

  .card--modern .card__position {
    top: 5cqw;
    left: 5cqw;
    z-index: 4;
    width: 15cqw;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
    background: var(--team-accent);
    color: #04060d;
    font: 900 7.5cqw/1 var(--font-label);
  }

  .card--modern .card__rating {
    top: 4cqw;
    right: 5cqw;
    z-index: 4;
    display: grid;
    justify-items: center;
    text-shadow: 0 0 8px var(--team-accent), 0 2px 4px rgb(0 0 0 / 0.8);
  }

  .card__rating b { font: 900 13cqw/0.9 var(--font-label); }
  .card__rating small { font: 700 4.5cqw/1 var(--font-label); letter-spacing: 0.1em; color: inherit; }

  .card--modern .card__nameplate {
    inset: auto 5cqw 15cqw;
    z-index: 4;
    transform: skewX(-8deg);
  }

  .card--modern .card__first-name { font: 600 6cqw/1 var(--font-body); text-transform: uppercase; letter-spacing: 0.18em; color: color-mix(in srgb, #fff 80%, var(--team-accent)); }
  .card--modern .card__last-name {
    --plate-width: 86cqw;
    --glyph-width: 0.68;
    font: italic 900 min(12.5cqw, var(--name-fit))/0.95 var(--font-display);
    text-transform: uppercase;
    background: linear-gradient(180deg, #fff 45%, color-mix(in srgb, var(--team-accent) 70%, #fff));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding-right: 2cqw;
  }
  .card--modern .card__team { font: 700 4.4cqw/1.4 var(--font-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--team-accent); }

  .card--modern .card__logo { right: 4cqw; top: 52%; width: 17cqw; z-index: 4; filter: drop-shadow(0 2px 4px rgb(0 0 0 / 0.6)); }

  .card__caption {
    inset: auto 0 0;
    z-index: 4;
    padding: 2.6cqw 5cqw 3cqw;
    font: 600 5cqw/1.2 var(--font-body);
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .card--modern .card__caption { background: linear-gradient(90deg, rgb(0 0 0 / 0.75), rgb(0 0 0 / 0.35)); border-top: 1px solid color-mix(in srgb, var(--team-accent) 50%, transparent); }

  .card__label {
    top: 23cqw;
    left: 5cqw;
    z-index: 4;
    padding: 0.8cqw 2.4cqw;
    border-radius: 999px;
    font: 800 3.8cqw/1.2 var(--font-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgb(0 0 0 / 0.65);
    border: 1px solid currentColor;
    color: var(--team-accent);
  }

  /* Holo foil: a rainbow band and sparkle grain that slide with the pointer (color-dodge). */
  .card__holo {
    inset: 0;
    z-index: 5;
    border-radius: inherit;
    pointer-events: none;
    background:
      repeating-linear-gradient(115deg, #ff3df2 0%, #ffd23d 7%, #39ff9c 14%, #39f3ff 21%, #8b5cff 28%, #ff3df2 35%),
      var(--noise);
    background-size: 280% 280%, 180px;
    background-position: var(--pointer-x) var(--pointer-y), center;
    mix-blend-mode: color-dodge;
    opacity: calc(var(--foil-opacity, 0) * var(--foil-strength, 0.35));
    transition: opacity 0.3s ease;
    filter: saturate(1.2) contrast(1.1);
  }

  .card__glare {
    inset: 0;
    z-index: 6;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y), rgb(255 255 255 / 0.55), rgb(255 255 255 / 0.1) 30%, transparent 60%);
    mix-blend-mode: overlay;
    opacity: var(--foil-opacity, 0);
    transition: opacity 0.3s ease;
  }

  /* ---- Parallels: rarity tiers ---- */
  .card--holo { --foil-strength: 0.55; }
  .card--holo .card__holo { opacity: max(0.18, calc(var(--foil-opacity, 0) * 0.55)); }
  .card--holo .card__frame { box-shadow: inset 0 0 0 3px #d9dee9, inset 0 0 0 4px #7c8396, inset 0 0 22px rgb(255 255 255 / 0.25); }
  .card--holo .card__label { color: #e9edf7; }

  .card--gold { --team-accent: #f5c84b; --foil-strength: 0.6; }
  .card--gold .card__holo {
    background: repeating-linear-gradient(115deg, #fff2b0 0%, #f5c84b 8%, #a8741a 16%, #ffe68a 24%, #f5c84b 32%), var(--noise);
    background-size: 260% 260%, 180px;
    background-position: var(--pointer-x) var(--pointer-y), center;
    /* Soft-light, like the 1-of-1: color-dodge blew out faces, and the leaders page is all gold. */
    mix-blend-mode: soft-light;
    opacity: max(0.15, calc(var(--foil-opacity, 0) * 0.6));
  }
  .card--gold .card__frame { box-shadow: inset 0 0 0 3px #f5c84b, inset 0 0 0 5px #7a5410, inset 0 0 26px rgb(245 200 75 / 0.45); }

  /* Cheddar foil: the 1-of-1. A gold spiral that turns, and a serial stamp. */
  .card--cheddar { --team-accent: #ffd86b; --foil-strength: 0.8; box-shadow: 0 0 0 2px #ffd86b, 0 0 40px rgb(255 216 107 / 0.55), 0 18px 40px rgb(0 0 0 / 0.6); }
  .card--cheddar .card__holo {
    background: repeating-conic-gradient(from 0deg at var(--pointer-x) var(--pointer-y), #fff3b8 0deg 6deg, #c58b1c 10deg 14deg, #ffe680 18deg 22deg, #6b4708 26deg 30deg);
    opacity: max(0.45, calc(var(--foil-opacity, 0) * 0.8));
    mix-blend-mode: soft-light;
  }
  .card--cheddar .card__frame { box-shadow: inset 0 0 0 4px #ffd86b, inset 0 0 30px rgb(255 216 107 / 0.6); }
  .card--cheddar .card__label { background: linear-gradient(90deg, #ffe68a, #c58b1c); color: #1d1405; border: 0; }

  /* ---- Rookie Watch insert: white border, foil script banner, RC shield ---- */
  .card--rookie .card__frame {
    background:
      linear-gradient(#f8f7f2, #f8f7f2) padding-box,
      linear-gradient(135deg, #fff, #d8d6cc);
    box-shadow: inset 0 0 0 1px #cfcab9;
  }
  .card--rookie .card__frame::before { opacity: 0.6; }
  .card--rookie .card__frame::after { display: none; }
  .card--rookie .card__art {
    inset: 5cqw 5cqw 32%;
    border-radius: 2cqw;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.2);
  }
  .card--rookie .card__nameplate { inset: auto 6cqw 13cqw; transform: none; }
  .card--rookie .card__first-name { color: #6a6658; }
  .card--rookie .card__last-name { background: none; color: #121212; -webkit-text-fill-color: #121212; }
  .card--rookie .card__team { color: color-mix(in srgb, var(--team-primary) 80%, #000); }
  .card--rookie .card__caption { background: color-mix(in srgb, var(--team-primary) 92%, #000); color: #fff; border: 0; }
  .card--rookie .card__logo { top: auto; bottom: 30cqw; right: 7cqw; width: 14cqw; }
  .card--rookie .card__position { top: 8cqw; left: auto; right: 8cqw; width: 12cqw; font-size: 6cqw; }
  .card--rookie .card__rating { display: none; }
  .card--rookie .card__label { top: 9cqw; left: 21cqw; color: #f5c84b; background: rgb(10 10 10 / 0.8); }

  .card__insert-banner {
    left: 3cqw;
    right: 3cqw;
    bottom: 41cqw;
    z-index: 4;
    padding: 0 3cqw;
    transform: rotate(-6deg);
    font: 400 12cqw/1.1 var(--font-script);
    text-align: center;
    background: linear-gradient(100deg, #8a5a12, #ffe68a 30%, #c58b1c 50%, #fff1b5 65%, #a8741a);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 2px 0 rgb(0 0 0 / 0.65)) drop-shadow(0 0 1px #000);
  }

  .card__rookie-shield {
    top: 7cqw;
    left: 7cqw;
    z-index: 4;
    width: 12cqw;
    aspect-ratio: 5 / 6;
    display: grid;
    place-items: center;
    clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%);
    background: linear-gradient(160deg, #ffe68a, #c58b1c 60%, #8a5a12);
    color: #1d1405;
    font: 900 5.5cqw/1 var(--font-label);
    padding-bottom: 2cqw;
  }

  /* ---- Parallax (prototype): special modern cards in three layers ----
     1. Background: the art's team pattern and the big number. Deepest, so it drifts furthest
        against the pointer; it's drawn oversized (::before) so its edges never show.
     2. Portrait: the headshot, a little less deep. Always clipped by the art window, so the
        player stays behind the frame.
     3. Frame: border, nameplate, badges, logo, caption, foil. The card's surface: it doesn't
        move on its own, it just tilts with the card.
     The tilt controller sets --parallax-x/y (-0.5 to 0.5). Flat translates only, no preserve-3d
     (Firefox). */
  .card--parallax {
    --depth-background: calc(var(--parallax-x, 0) * -12cqw) calc(var(--parallax-y, 0) * -10cqw);
    --depth-portrait: calc(var(--parallax-x, 0) * -5cqw) calc(var(--parallax-y, 0) * -3cqw);
  }

  .card--parallax .card__art::before {
    content: "";
    position: absolute;
    inset: -8cqw;
    background: inherit;
    translate: var(--depth-background);
    transition: translate 0.3s ease-out;
  }

  .card--parallax :is(.card__number, .card__headshot) { transition: translate 0.3s ease-out; }
  .card--parallax .card__number { translate: var(--depth-background); }

  /* The portrait reaches below the window, so lifting it never shows a gap under the shoulders. */
  .card--parallax .card__headshot { bottom: -4cqw; height: calc(100% + 4cqw); translate: var(--depth-portrait); }

  /* ---- Retro cardboard: cream stock, thick team frame, rounded photo, script team name ---- */
  .card--vintage {
    border-radius: 5px;
    color: #2c2017;
    transform: none;
    box-shadow: 0 2px 0 rgb(0 0 0 / 0.25), 0 12px 22px rgb(0 0 0 / 0.4);
    transition: transform 0.3s cubic-bezier(.2, .8, .2, 1), box-shadow 0.3s ease;
  }

  .card--vintage:hover {
    translate: none;
    transform: perspective(900px) translateY(-8px) rotateX(calc(var(--tilt-x) * 0.35)) rotateY(calc(var(--tilt-y) * 0.35)) rotateZ(-0.6deg);
    box-shadow: 0 4px 0 rgb(0 0 0 / 0.2), 0 28px 38px rgb(0 0 0 / 0.5);
  }

  .card--vintage .card__frame {
    background: var(--noise-light), linear-gradient(170deg, #f8efd8, #efe2c4);
    box-shadow: inset 0 0 0 1px rgb(110 80 40 / 0.35), inset 0 0 30px rgb(140 100 40 / 0.18);
  }

  .card--vintage .card__art {
    inset: 6cqw 6cqw 33%;
    border: 3.4cqw solid var(--team-vintage);
    border-radius: 9cqw 9cqw 4cqw 4cqw;
    background:
      radial-gradient(120% 80% at 50% 110%, rgb(255 255 255 / 0.5), transparent 70%),
      linear-gradient(180deg, #a9c4cf, #dfe8e4);
    overflow: hidden;
    box-shadow: 0 0 0 1px rgb(60 40 20 / 0.4);
  }

  .card--vintage .card__headshot { filter: sepia(0.3) saturate(0.75) contrast(1.06); }
  .card--vintage .card__number { display: none; }

  .card--vintage .card__position {
    left: 4cqw;
    bottom: 28cqw;
    z-index: 4;
    width: 15cqw;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--team-vintage-secondary);
    border: 1.2cqw solid #f6ecd3;
    color: #2c2017;
    font: 400 7cqw/1 var(--font-collegiate);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.4);
  }

  .card--vintage .card__rating {
    top: 3cqw;
    right: 3cqw;
    z-index: 4;
    width: 18cqw;
    aspect-ratio: 1;
    display: grid;
    place-content: center;
    justify-items: center;
    border-radius: 50%;
    border: 0.8cqw solid #9b2a22;
    color: #9b2a22;
    background: rgb(246 236 211 / 0.9);
    transform: rotate(-12deg);
  }
  .card--vintage .card__rating b { font: 400 7cqw/1 var(--font-collegiate); }
  .card--vintage .card__rating small { font: 400 3.4cqw/1 var(--font-collegiate); }

  .card--vintage .card__nameplate { inset: auto 6cqw 6cqw; text-align: center; }
  .card--vintage .card__first-name { font: 600 5cqw/1.1 var(--font-serif); text-transform: uppercase; letter-spacing: 0.14em; color: #6f5b46; }
  .card--vintage .card__last-name { --plate-width: 86cqw; --glyph-width: 0.8; font: 400 min(10.5cqw, var(--name-fit))/1 var(--font-slab); text-transform: uppercase; color: #2c2017; }
  .card--vintage .card__team { font: 400 9cqw/1.2 var(--font-script); color: var(--team-vintage); overflow: visible; padding-top: 0.5cqw; }
  .card--vintage .card__logo { right: 4cqw; bottom: 28cqw; width: 14cqw; z-index: 4; filter: saturate(0.7) sepia(0.15); }
  .card--vintage .card__caption { inset: auto 0 0; padding: 1.4cqw 4cqw; text-align: center; font: 600 4.4cqw/1.2 var(--font-serif); background: var(--team-vintage); color: #f6ecd3; }
  .card--vintage:has(.card__caption) .card__nameplate { bottom: 9cqw; }
  .card--vintage .card__label { top: 3cqw; left: 3cqw; background: #9b2a22; color: #f6ecd3; border: 0; font-family: var(--font-collegiate); }
  .card--vintage .card__holo, .card--vintage .card__glare { display: none; }

  /* ---- The card's reverse, shown face-down in a fresh pack ---- */
  .card-reverse {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 4%;
    border-radius: var(--radius-card);
    background:
      repeating-linear-gradient(45deg, rgb(57 243 255 / 0.08) 0 2px, transparent 2px 14px),
      repeating-linear-gradient(-45deg, rgb(255 61 242 / 0.06) 0 2px, transparent 2px 14px),
      radial-gradient(circle at 50% 45%, #1b2a55, #060a18 70%);
    box-shadow: inset 0 0 0 3px #c9ccd6, inset 0 0 0 6px #0b1122, inset 0 0 0 7px rgb(57 243 255 / 0.6), 0 14px 30px rgb(0 0 0 / 0.45);
    color: #fff;
  }

  .card-reverse__logo {
    font: italic 900 1.6rem/1 var(--font-display);
    background: linear-gradient(135deg, #d9dde8, #fff 30%, #8d93a8 55%, #f1f3fa 75%, #9aa0b5);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    transform: skewX(-8deg);
  }

  .card-reverse__tag { font: 700 0.65rem/1 var(--font-label); letter-spacing: 0.3em; color: var(--neon); text-transform: uppercase; }
}