@layer cards {
  .card-grid {
    display: grid;
    /* Two-up at the narrowest: half the grid less the gap, so a padded container (the Rookie
       Watch sheet) still fits two rather than dropping to one card per screen. */
    grid-template-columns: repeat(auto-fill, minmax(min(190px, calc(50% - 0.8rem)), 1fr));
    --grid-gap: clamp(0.9rem, 2vw, 1.6rem);
    gap: var(--grid-gap);
  }

  /* A short run (the five Rookie Watch cards) laid out like the opened pack: rows centered, so an
     odd card out sits in the middle rather than at the left. */
  .card-grid--centered { display: flex; flex-wrap: wrap; justify-content: center; }
  /* Five across while each gets at least 190px; narrower, they keep that width (half the row on a
     phone) and wrap, so a card left over matches the rest. */
  .card-grid--centered > * {
    flex: none;
    width: max(calc((100% - 4 * var(--grid-gap)) / 5), min(190px, calc(50% - var(--grid-gap) / 2)));
  }

  .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, scale 0.2s ease;
    box-shadow: 0 14px 30px rgb(0 0 0 / 0.45);
  }

  /* Only where there's a real hover: after a tap, a sticky lift outlasts the touch. */
  @media (hover: hover) {
    .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); }
  }
  /* A long press is the tilt gesture (see the tilt controller), not a text selection or the
     browser's link menu. */
  .card { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; user-select: none; }

  /* Held under a finger: the card lifts off the page while the finger steers it. */
  .card.is-held {
    z-index: 2;
    scale: 1.06;
    box-shadow: 0 26px 50px rgb(0 0 0 / 0.6), 0 0 30px color-mix(in srgb, var(--team-accent) 45%, transparent);
    transition-duration: 0.08s, 0.2s, 0.25s, 0.2s;
  }
  .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-on-primary, 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: 5;
    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;
  }

  /* A past season's rookie card keeps its design; on modern stock the shield sits under the position. */
  .card--modern:not(.card--rookie) .card__rookie-shield { top: 22cqw; left: 6.5cqw; }
  /* Under a label (First Star, a pack's rarity), the label keeps its place and the shield drops below it. */
  .card--modern:not(.card--rookie) .card__label ~ .card__rookie-shield { top: 31cqw; }
  .card--vintage:not(.card--rookie) .card__label ~ .card__rookie-shield { top: 13cqw; }

  /* ---- 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;
  }

  @media (hover: hover) {
    .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: var(--team-vintage-secondary-ink);
    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; }
  /* Fitted between the position badge and the logo, which sit at the name's row. */
  .card--vintage .card__last-name { --plate-width: 60cqw; --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; }

  /* Type floors for thumbnails: two-up on a phone a card is ~160px wide, where cqw sizing alone
     sets the stat line and team under 8px. The floors only bite below ~180px. */
  .card__caption { font-size: max(5cqw, 9px); }
  .card__label { font-size: max(3.8cqw, 7.5px); }
  .card--modern .card__first-name { font-size: max(6cqw, 9px); }
  .card--modern .card__team { font-size: max(4.4cqw, 8.5px); }
  .card--vintage .card__first-name { font-size: max(5cqw, 8.5px); }
  .card--vintage .card__caption { font-size: max(4.4cqw, 8.5px); }
  .card--vintage:has(.card__caption) .card__nameplate { bottom: max(9cqw, 15px); }
  /* Four small cards in one card's place (a franchise's greats who passed through), without the floors. The rows are
     set further apart than the columns, by the card's proportions, so the four stand as tall as one card. */
  .card-grid__quad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: calc(var(--grid-gap) / 2 * 1.4) calc(var(--grid-gap) / 2); }
  .card-grid__quad .card--modern .card__first-name { font-size: 6cqw; }
  .card-grid__quad .card--modern .card__team { font-size: 4.4cqw; }
  .card-grid__quad .card--vintage .card__first-name { font-size: 5cqw; }
  .card-grid__quad .card__label { font-size: 3.8cqw; }

  /* ---- The card's reverse, shown face-down in a fresh pack ----
     A playing-card back: a silver rim, a lattice field, and the house hexagon in the middle, with
     corner pips turned end for end so it reads the same either way up. */
  .card-reverse {
    --chrome: linear-gradient(135deg, #d9dde8, #fff 30%, #8d93a8 55%, #f1f3fa 75%, #9aa0b5);
    --hexagon: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
    position: absolute;
    inset: 0;
    container-type: inline-size;
    border-radius: var(--radius-card);
    background: var(--chrome);
    box-shadow: 0 14px 30px rgb(0 0 0 / 0.45);
  }

  .card-reverse__field {
    position: absolute;
    inset: 4.5cqw;
    display: grid;
    place-items: center;
    border-radius: calc(var(--radius-card) - 4px);
    background:
      repeating-linear-gradient(45deg, rgb(57 243 255 / 0.16) 0 1px, transparent 1px 7cqw),
      repeating-linear-gradient(-45deg, rgb(57 243 255 / 0.16) 0 1px, transparent 1px 7cqw),
      repeating-linear-gradient(45deg, transparent 0 3.5cqw, rgb(255 61 242 / 0.07) 3.5cqw 7cqw),
      radial-gradient(circle at 50% 50%, #1d2f60, #060a18 72%);
    box-shadow: inset 0 0 0 1px #0b1122, inset 0 0 0 2.5cqw #0b1122, inset 0 0 0 calc(2.5cqw + 1px) rgb(57 243 255 / 0.55);
  }

  .card-reverse__field::before,
  .card-reverse__field::after {
    content: "TC";
    position: absolute;
    display: grid;
    place-items: center;
    width: 11cqw;
    aspect-ratio: 1;
    clip-path: var(--hexagon);
    background: var(--chrome);
    color: #060a18;
    font: 900 4cqw/1 var(--font-label);
  }

  .card-reverse__field::before { top: 5cqw; left: 5cqw; }
  .card-reverse__field::after { right: 5cqw; bottom: 5cqw; rotate: 180deg; }

  /* The medallion: a neon hexagon ring around the chrome one. */
  .card-reverse__mark {
    display: grid;
    place-items: center;
    width: 50cqw;
    aspect-ratio: 1;
    clip-path: var(--hexagon);
    background: linear-gradient(135deg, var(--neon), var(--neon-hot));
  }

  .card-reverse__mark span {
    display: grid;
    place-items: center;
    width: 88%;
    aspect-ratio: 1;
    clip-path: var(--hexagon);
    background: var(--chrome);
    color: #060a18;
    font: 900 17cqw/1 var(--font-label);
    letter-spacing: -0.02em;
  }
}