@layer profile {
  .profile__toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-5);
  }

  .profile__back { font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }

  .edition-switch { display: inline-flex; align-items: center; gap: var(--space-2); padding: 4px 4px 4px 1rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); }
  .edition-switch__label { white-space: nowrap; font: 700 0.7rem/1 var(--label-font); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); }
  .edition-switch__option { white-space: nowrap; padding: 0.4rem 0.9rem; border-radius: 999px; text-decoration: none; color: var(--ink-muted); font-weight: 700; }
  .edition-switch__option.is-active { background: var(--surface-raised); color: var(--ink); box-shadow: inset 0 0 0 1px var(--neon); }
  [data-edition="vintage"] .edition-switch { --ink: #2c2017; --ink-muted: #6f5b46; }
  @media (max-width: 480px) {
    .edition-switch { padding-left: 4px; }
    .edition-switch__label { display: none; }
  }

  .slab-stage { display: grid; justify-items: center; gap: var(--space-4); }

  /* ---- The slab: molded clear plastic around a label and the card ---- */
  .slab {
    position: relative;
    padding: clamp(10px, 1.8vw, 20px);
    border-radius: 26px;
    background:
      linear-gradient(135deg, rgb(255 255 255 / 0.22), rgb(255 255 255 / 0.05) 40%, rgb(255 255 255 / 0.12));
    border: 1px solid rgb(255 255 255 / 0.45);
    box-shadow:
      inset 0 0 0 5px rgb(255 255 255 / 0.07),
      inset 0 0 0 6px rgb(255 255 255 / 0.25),
      inset 0 2px 2px rgb(255 255 255 / 0.6),
      inset 0 -6px 14px rgb(0 0 0 / 0.25),
      0 40px 80px rgb(0 0 0 / 0.55);
    backdrop-filter: blur(3px);
  }

  /* A sheen across the plastic. */
  .slab::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 30%, rgb(255 255 255 / 0.16) 38%, transparent 46%, transparent 70%, rgb(255 255 255 / 0.08) 74%, transparent 78%);
  }

  .slab__label {
    display: grid;
    grid-template-columns: 1fr auto auto;
    grid-template-areas: "text grade-text grade" "number number number";
    align-items: center;
    gap: 0.25rem 1.25rem;
    padding: 0.8rem 1.2rem;
    margin-bottom: clamp(10px, 1.6vw, 18px);
    border-radius: 10px;
    background: linear-gradient(#fdfdfb, #f1f1ec);
    border: 3px solid var(--cheddar);
    box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 3px color-mix(in srgb, var(--cheddar) 50%, transparent), 0 2px 6px rgb(0 0 0 / 0.3);
    color: #141414;
    font-family: var(--font-body);
    text-transform: uppercase;
  }

  .slab__label-text { grid-area: text; display: grid; line-height: 1.15; min-width: 0; }
  .slab__set { font-weight: 600; font-size: 0.85rem; letter-spacing: 0.08em; }
  .slab__player { font-weight: 800; font-size: clamp(1.1rem, 2.4vw, 1.5rem); letter-spacing: 0.03em; }
  .slab__team { font-weight: 600; font-size: 0.85rem; color: #555; letter-spacing: 0.06em; }
  .slab__grade-text { grid-area: grade-text; text-align: right; display: grid; line-height: 1.1; }
  .slab__grade-name { font-weight: 800; font-size: clamp(1.1rem, 2.4vw, 1.6rem); letter-spacing: 0.04em; }
  .slab__caption { font-size: 0.75rem; font-weight: 600; color: #555; letter-spacing: 0.12em; }
  .slab__grade { grid-area: grade; font: 900 clamp(2.6rem, 6vw, 3.8rem)/1 var(--font-label); color: #141414; }
  .slab__grade--gem {
    background: linear-gradient(160deg, #8a5a12, #ffe68a 35%, #c58b1c 55%, #fff1b5 70%, #a8741a);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 1px 0 rgb(0 0 0 / 0.35));
  }
  .slab__number { grid-area: number; display: flex; align-items: center; flex-wrap: wrap; gap: 0.3rem 0.75rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; color: #444; }
  .slab__number > span { white-space: nowrap; }
  .slab__barcode { display: block; flex: none; width: 9rem; height: 1.1rem; }

  .slab__well {
    padding: clamp(8px, 1.4vw, 14px);
    border-radius: 16px;
    background: rgb(0 0 0 / 0.28);
    box-shadow: inset 0 4px 14px rgb(0 0 0 / 0.55), inset 0 0 0 1px rgb(255 255 255 / 0.12);
  }

  /* ---- The slab's back label: brand, holographic seal, QR code to this card ---- */
  /* The QR spans both rows and is no taller than them, so the back label matches the front's
     height and the card under it gets the same room as the front. */
  .slab__label--back {
    grid-template-columns: 1fr auto auto;
    grid-template-areas: "brand hologram qr" "number caption qr";
  }
  .slab__brand { grid-area: brand; display: flex; align-items: center; gap: 0.9rem; min-width: 0; }
  .slab__brand .brand__mark { width: 3rem; background: #141414; color: #fff; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); font-family: var(--font-label); }
  .slab__brand-text { display: grid; line-height: 1.15; }
  .slab__brand-name { font: italic 900 clamp(1.2rem, 2.6vw, 1.6rem)/1 var(--font-display); letter-spacing: 0.02em; }
  .slab__brand-tag { font-weight: 800; font-size: 0.85rem; letter-spacing: 0.08em; }
  .slab__brand-tagline { font-weight: 600; font-size: 0.75rem; letter-spacing: 0.1em; color: #555; }
  .slab__hologram {
    grid-area: hologram;
    display: grid;
    place-items: center;
    width: 3.8rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background:
      radial-gradient(circle, rgb(255 255 255 / 0.55), transparent 62%),
      repeating-linear-gradient(115deg, #ff3df2 0%, #ffd23d 8%, #39ff9c 16%, #39f3ff 24%, #8b5cff 32%, #ff3df2 40%);
    background-size: 100% 100%, 300% 300%;
    background-position: center, var(--pointer-x, 50%) var(--pointer-y, 50%);
    box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.7), 0 1px 3px rgb(0 0 0 / 0.3);
    color: rgb(20 20 20 / 0.55);
    font: italic 900 0.6rem/1.05 var(--font-display);
    letter-spacing: 0.04em;
    /* Keep the wrapped brand inside the circle's chord, centered line by line. */
    padding-inline: 0.55rem;
    text-align: center;
  }
  .slab__qr-code { grid-area: qr; align-self: center; display: block; width: 5rem; height: auto; padding: 3px; background: #fff; }
  .slab__qr-caption { grid-area: caption; justify-self: end; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; color: #444; }

  /* ---- The flip: the whole slab turns over. Both faces share one grid cell, so the back is as
     tall as the front. Everything stays flat (no preserve-3d / backface-visibility, which Firefox
     renders through): the back is pre-mirrored, and the faces swap visibility as the turn passes
     edge-on. The flip controller owns --flip-angle, so a drag can follow the pointer. ---- */
  .flip {
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    --pointer-x: 50%;
    --pointer-y: 50%;
    --flip-duration: 0.95s;
    width: min(1000px, 100%);
    transform: perspective(2400px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
    transition: transform 0.3s ease-out;
    touch-action: pan-y;
    cursor: grab;
  }

  .flip.is-dragging { cursor: grabbing; user-select: none; }

  .flip__inner {
    display: grid;
    transform: perspective(2200px) rotateY(var(--flip-angle, 0deg));
    transition: transform var(--flip-duration) cubic-bezier(0.25, 0.9, 0.25, 1);
  }

  /* This easing reaches 90deg about 15% of the way through the turn. */
  .flip__face {
    grid-area: 1 / 1;
    position: relative;
    transition: visibility 0s linear calc(var(--flip-duration) * 0.15);
  }

  .flip.is-dragging :is(.flip__inner, .flip__face) { transition: none; }

  .flip.is-flipped .flip__face--front, .flip:not(.is-flipped) .flip__face--back { visibility: hidden; }

  @media (prefers-reduced-motion: reduce) {
    .flip { --flip-duration: 0s; }
  }

  /* The front slab sets the size; the back's card fits under its label and scrolls if it must. */
  .flip__face--back { transform: scaleX(-1); height: 0; min-height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); }
  /* The back card is exactly as tall as the well; its career table scrolls inside it. The body
     keeps its content height (min-height: auto), so a tall attribute column scrolls the card
     rather than overlapping the footer. */
  .slab--back .slab__well { display: grid; min-height: 0; }
  .slab--back .big-card--back { min-height: 0; overflow: auto; scrollbar-width: thin; }
  .slab--back .card-back__body { min-height: auto; }

  .button--flip { min-width: 12rem; font-size: 1.05rem; }

  /* ---- Big card, shared ---- */
  .big-card { position: relative; container-type: inline-size; color: #fff; border-radius: 18px; overflow: hidden; }
  .big-card--front { aspect-ratio: 7 / 5; }

  .big-card__photo, .big-card__lasers, .big-card__holo, .big-card__glare,
  .big-card__number-block, .big-card__rating, .big-card__nameplate, .big-card__logo, .big-card__season-line { position: absolute; }

  .big-card__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 35%; }
  .big-card__photo img.is-fallback { object-fit: contain; object-position: bottom center; }

  .big-card__holo, .big-card__glare { inset: 0; pointer-events: none; border-radius: inherit; display: block; }
  .big-card__holo {
    z-index: 6;
    background:
      repeating-linear-gradient(115deg, #ff3df2 0%, #ffd23d 6%, #39ff9c 12%, #39f3ff 18%, #8b5cff 24%, #ff3df2 30%),
      var(--noise);
    background-size: 300% 300%, 200px;
    background-position: var(--pointer-x) var(--pointer-y), center;
    mix-blend-mode: color-dodge;
    opacity: calc(var(--foil-opacity, 0) * 0.18);
    transition: opacity 0.3s ease;
  }
  .big-card__glare {
    z-index: 7;
    background: radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y), rgb(255 255 255 / 0.45), transparent 45%);
    mix-blend-mode: overlay;
    opacity: var(--foil-opacity, 0);
    transition: opacity 0.3s ease;
  }

  /* ---- Modern front: action shot in an angled window, neon lasers, italic speed type ---- */
  [data-edition="modern"] .big-card--front {
    background:
      repeating-linear-gradient(108deg, transparent 0 22px, color-mix(in srgb, var(--team-secondary) 12%, transparent) 22px 24px),
      linear-gradient(135deg, color-mix(in srgb, var(--team-primary) 90%, #fff 8%), color-mix(in srgb, var(--team-primary) 60%, #000));
    box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--team-accent) 75%, transparent), inset 0 0 40px color-mix(in srgb, var(--team-accent) 25%, transparent);
  }

  /* The action shot runs edge to edge under an angled team-color panel. */
  [data-edition="modern"] .big-card__photo { inset: 0; }

  /* On the landscape card the 16:9 action shot shows whole, full width, and fades into the
     nameplate rather than being cropped to 7:5 (the portrait card still crops: it has to). */
  @media (min-width: 721px) {
    [data-edition="modern"] .big-card__photo img:not(.is-fallback) {
      height: auto;
      aspect-ratio: 16 / 9;
      mask-image: linear-gradient(to bottom, #000 75%, transparent);
    }
  }

  [data-edition="modern"] .big-card__photo::before,
  [data-edition="modern"] .big-card__photo::after { content: ""; position: absolute; inset: 0; }

  [data-edition="modern"] .big-card__photo::before {
    z-index: 1;
    clip-path: polygon(0 0, 25% 0, 18% 100%, 0 100%);
    background:
      repeating-linear-gradient(108deg, transparent 0 22px, color-mix(in srgb, var(--team-secondary) 14%, transparent) 22px 24px),
      linear-gradient(160deg, color-mix(in srgb, var(--team-primary) 92%, #fff 6%), color-mix(in srgb, var(--team-primary) 70%, #000));
    opacity: 0.94;
  }

  [data-edition="modern"] .big-card__photo::after {
    background:
      linear-gradient(90deg, transparent 18%, color-mix(in srgb, var(--team-primary) 55%, transparent) 22%, transparent 40%),
      linear-gradient(0deg, rgb(3 5 12 / 0.92) 0%, rgb(3 5 12 / 0.35) 32%, transparent 55%);
  }

  [data-edition="modern"] .big-card__lasers {
    inset: 0;
    z-index: 2;
    display: block;
    pointer-events: none;
    background:
      linear-gradient(94.3deg, transparent 21.1%, var(--team-accent) 21.3%, transparent 21.6%),
      linear-gradient(94.3deg, transparent 23.4%, color-mix(in srgb, var(--team-accent) 50%, transparent) 23.5%, transparent 23.7%),
      linear-gradient(-28deg, transparent 84%, color-mix(in srgb, var(--neon-hot) 70%, transparent) 84.15%, transparent 84.4%),
      linear-gradient(90deg, var(--team-accent), transparent 40%) top left / 100% 3px no-repeat;
    filter: drop-shadow(0 0 4px var(--team-accent)) drop-shadow(0 0 10px var(--team-accent));
    mix-blend-mode: screen;
  }

  [data-edition="modern"] .big-card__number-block {
    top: 5cqw;
    left: 3.5cqw;
    z-index: 3;
    width: 17cqw;
    display: grid;
    justify-items: center;
    gap: 1cqw;
  }

  [data-edition="modern"] .big-card__number {
    font: italic 900 15cqw/0.85 var(--font-display);
    color: #fff;
    letter-spacing: -0.04em;
    text-shadow: 0 0 1.2cqw var(--team-accent), 0.6cqw 0.6cqw 0 color-mix(in srgb, var(--team-accent) 70%, #000);
    transform: skewX(-8deg);
  }

  [data-edition="modern"] .big-card__position {
    width: 8cqw;
    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 4.2cqw/1 var(--font-label);
  }

  [data-edition="modern"] .big-card__position-name { font: 700 1.5cqw/1.2 var(--font-label); letter-spacing: 0.2em; text-transform: uppercase; text-align: center; color: color-mix(in srgb, #fff 75%, var(--team-accent)); }

  [data-edition="modern"] .big-card__rating {
    top: 3.5cqw;
    right: 3.5cqw;
    z-index: 3;
    display: grid;
    justify-items: center;
    padding: 1.2cqw 1.6cqw;
    clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%);
    background: linear-gradient(160deg, rgb(4 6 13 / 0.85), rgb(4 6 13 / 0.6));
    box-shadow: inset 0 0 0 2px var(--team-accent);
  }
  .big-card__rating b { font: 900 5.5cqw/1 var(--font-label); text-shadow: 0 0 1cqw var(--team-accent); }
  .big-card__rating small { font: 700 1.3cqw/1 var(--font-label); letter-spacing: 0.2em; color: inherit; padding-bottom: 1.2cqw; }

  [data-edition="modern"] .big-card__nameplate {
    left: 4cqw;
    right: 16cqw;
    bottom: 4cqw;
    z-index: 3;
    display: grid;
    transform: skewX(-8deg);
  }

  [data-edition="modern"] .big-card__first-name { font: 600 2.6cqw/1 var(--font-body); letter-spacing: 0.3em; text-transform: uppercase; color: color-mix(in srgb, #fff 80%, var(--team-accent)); }
  /* Long last names shrink to fit, as on the small card (see cards.css). */
  .big-card__last-name { --name-fit: calc(var(--plate-width) / (var(--name-length, 1) * var(--glyph-width))); }

  [data-edition="modern"] .big-card__last-name {
    --plate-width: 76cqw;
    --glyph-width: 0.68;
    font: italic 900 min(8.6cqw, var(--name-fit))/0.95 var(--font-display);
    text-transform: uppercase;
    letter-spacing: -0.01em;
    background: linear-gradient(180deg, #fff 40%, color-mix(in srgb, var(--team-accent) 75%, #fff));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0.4cqw 0 rgb(0 0 0 / 0.6));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 1cqw;
  }
  [data-edition="modern"] .big-card__team { font: 700 1.6cqw/1.6 var(--font-label); letter-spacing: 0.24em; text-transform: uppercase; color: var(--team-accent); }

  [data-edition="modern"] .big-card__logo { right: 3.5cqw; bottom: 3.5cqw; width: 11cqw; z-index: 3; filter: drop-shadow(0 0.5cqw 1cqw rgb(0 0 0 / 0.6)); }

  [data-edition="modern"] .big-card__season-line {
    top: 3.5cqw;
    left: 24cqw;
    z-index: 3;
    padding: 0.6cqw 1.6cqw;
    border-radius: 999px;
    background: rgb(4 6 13 / 0.7);
    border: 1px solid color-mix(in srgb, var(--team-accent) 60%, transparent);
    font: 700 1.5cqw/1.3 var(--font-label);
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  /* ---- Vintage front: cream stock, thick team frame, rounded photo, script team name ---- */
  [data-edition="vintage"] .big-card--front {
    border-radius: 8px;
    background: var(--noise-light), linear-gradient(160deg, #f8efd8, #ecdcba);
    box-shadow: inset 0 0 0 1px rgb(110 80 40 / 0.4), inset 0 0 50px rgb(140 100 40 / 0.22);
    color: #2c2017;
  }

  [data-edition="vintage"] .big-card__photo {
    inset: 4cqw 4cqw 17cqw;
    border: 1.8cqw solid var(--team-vintage);
    border-radius: 6cqw 6cqw 2cqw 2cqw;
    overflow: hidden;
    box-shadow: 0 0 0 0.3cqw #2c2017;
  }

  [data-edition="vintage"] .big-card__photo img { filter: sepia(0.35) saturate(0.72) contrast(1.08) brightness(1.02); }
  [data-edition="vintage"] .big-card__photo::after { content: ""; position: absolute; inset: 0; background: var(--noise); opacity: 0.18; mix-blend-mode: multiply; }
  [data-edition="vintage"] .big-card__lasers { display: none; }
  [data-edition="vintage"] .big-card__holo, [data-edition="vintage"] .big-card__glare { display: none; }

  /* A felt pennant for the number and position. */
  [data-edition="vintage"] .big-card__number-block {
    top: 2.6cqw;
    left: 7cqw;
    z-index: 3;
    width: 12cqw;
    padding: 1.2cqw 0 3.6cqw;
    display: grid;
    justify-items: center;
    background: var(--team-vintage-secondary);
    clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%);
    color: #2c2017;
  }
  [data-edition="vintage"] .big-card__number { font: 400 6.5cqw/1 var(--font-collegiate); }
  [data-edition="vintage"] .big-card__position { font: 400 3cqw/1 var(--font-collegiate); }
  [data-edition="vintage"] .big-card__position-name { display: none; }

  [data-edition="vintage"] .big-card__rating {
    top: 2.5cqw;
    right: 6cqw;
    z-index: 3;
    width: 11cqw;
    aspect-ratio: 1;
    display: grid;
    place-content: center;
    justify-items: center;
    border-radius: 50%;
    border: 0.5cqw solid #9b2a22;
    background: rgb(246 236 211 / 0.92);
    color: #9b2a22;
    transform: rotate(-10deg);
  }
  [data-edition="vintage"] .big-card__rating b { font: 400 4.2cqw/1 var(--font-collegiate); text-shadow: none; }
  [data-edition="vintage"] .big-card__rating small { font: 400 1.4cqw/1 var(--font-collegiate); padding: 0; }

  [data-edition="vintage"] .big-card__nameplate {
    left: 4cqw;
    right: 4cqw;
    bottom: 2.2cqw;
    z-index: 3;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "last team" "first team";
    align-items: center;
    column-gap: 2cqw;
  }
  [data-edition="vintage"] .big-card__first-name { grid-area: first; font: 600 1.9cqw/1.1 var(--font-serif); text-transform: uppercase; letter-spacing: 0.24em; color: #6f5b46; }
  [data-edition="vintage"] .big-card__last-name { --plate-width: 52cqw; --glyph-width: 0.8; grid-area: last; font: 400 min(6cqw, var(--name-fit))/1 var(--font-slab); text-transform: uppercase; color: #2c2017; }
  [data-edition="vintage"] .big-card__team { grid-area: team; justify-self: end; font: 400 5.8cqw/1 var(--font-script); color: var(--team-vintage); transform: rotate(-4deg); padding-right: 12cqw; }
  [data-edition="vintage"] .big-card__logo { right: 5cqw; bottom: 3cqw; width: 9cqw; z-index: 3; filter: saturate(0.65) sepia(0.2); }

  [data-edition="vintage"] .big-card__season-line {
    left: 21cqw;
    top: 4.6cqw;
    z-index: 3;
    padding: 0.5cqw 1.6cqw;
    background: rgb(246 236 211 / 0.9);
    border: 1px solid rgb(70 45 20 / 0.5);
    font: 600 1.6cqw/1.3 var(--font-serif);
    color: #2c2017;
  }

  /* ---- Card back, shared structure ---- */
  .big-card--back {
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 1.1rem;
    padding: clamp(1rem, 2.6cqw, 1.8rem);
    min-height: 100%;
    font-family: var(--font-body);
  }

  .card-back__header { display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 1.2rem; align-items: center; }
  .card-back__number { grid-row: span 2; display: grid; place-items: center; width: 4.4rem; aspect-ratio: 1; font: 900 2rem/1 var(--font-label); }
  .card-back__name { font-size: clamp(1.5rem, 3.4cqw, 2.3rem); text-transform: uppercase; }
  .card-back__subtitle { font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.9rem; opacity: 0.8; }
  .card-back__bio { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem 1rem; margin-top: 0.6rem; }
  .card-back__bio div { min-width: 0; }
  .card-back__bio-wide { grid-column: span 2; }
  .card-back__bio dt { font: 700 0.62rem/1.2 var(--label-font); letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.7; }
  .card-back__bio dd { font-weight: 600; font-size: 1.02rem; line-height: 1.25; }

  .card-back__body { display: grid; grid-template-columns: minmax(15rem, 0.8fr) 1.6fr; gap: 1.4rem; min-height: 0; }
  .card-back__career { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
  .card-back__attributes { min-width: 0; }
  .card-back__heading { font: 800 0.8rem/1.2 var(--label-font); font-style: normal; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 0.6rem; }
  .card-back__empty { opacity: 0.75; margin-top: 0.8rem; font-size: 0.95rem; }

  .highlights { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  .highlights__item { padding: 0.6rem 0.7rem; border: 1px solid currentColor; border-radius: 6px; }
  .highlights__item dt { font: 700 0.62rem/1.2 var(--label-font); letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.75; }
  .highlights__item dd { font: 900 1.6rem/1.1 var(--label-font); }
  .highlights__badges { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.8rem; }
  .highlights__badge { padding: 0.35rem 0.8rem; display: inline-block; border-radius: 999px; font: 700 0.75rem/1.2 var(--label-font); letter-spacing: 0.12em; text-transform: uppercase; color: var(--card-back-surface); background: var(--team-accent); }
  [data-edition="vintage"] .highlights__item { border-color: rgb(155 42 34 / 0.6); }
  [data-edition="vintage"] .highlights__item dt { color: #9b2a22; opacity: 1; }
  [data-edition="vintage"] .highlights__item dd { font: 400 1.6rem/1.1 var(--font-collegiate); color: #1f3f73; }

  .radar { width: 100%; max-width: 190px; margin-inline: auto; overflow: visible; }
  .radar__ring { fill: none; stroke: currentColor; stroke-opacity: 0.16; }
  .radar__axis { stroke: currentColor; stroke-opacity: 0.16; }
  .radar__shape { fill: color-mix(in srgb, var(--team-accent) 30%, transparent); stroke: var(--team-accent); stroke-width: 2; stroke-linejoin: round; }
  .radar__dot { fill: var(--team-accent); stroke: var(--card-back-surface, #0a1020); stroke-width: 2; }
  .radar__label { font: 700 9px/1 var(--label-font); letter-spacing: 0.12em; fill: currentColor; opacity: 0.7; }
  .radar__value { font: 900 12px/1 var(--label-font); fill: currentColor; }

  .attribute-list { display: grid; gap: 0.35rem; margin-top: 0.6rem; }
  .attribute-list__item { display: grid; grid-template-columns: 9.5rem 1fr 2rem; align-items: center; gap: 0.6rem; font-weight: 600; font-size: 0.95rem; }
  .attribute-list__value { font: 800 0.95rem/1 var(--label-font); text-align: right; }
  .attribute-list__meter { max-width: none; }

  /* column-reverse opens the scroll at the bottom: the latest seasons, like the end of a card back. */
  .career-table { flex: 1 1 0; min-height: 12rem; overflow: auto; border-radius: 8px; scrollbar-width: thin; display: flex; flex-direction: column-reverse; }
  .career-table table { flex: none; }
  .career-table table { width: 100%; font-variant-numeric: tabular-nums; font-size: 0.92rem; }
  [data-edition="vintage"] .career-table table { font-size: 0.84rem; }
  .career-table th, .career-table td { padding: 0.28rem 0.45rem; text-align: right; white-space: nowrap; }
  .career-table :is(th, td):is(:first-child, .career-table__team) { text-align: left; }
  .career-table__team { max-width: 11rem; overflow: hidden; text-overflow: ellipsis; }
  .career-table thead th { position: sticky; top: 0; z-index: 1; font: 700 0.66rem/1.2 var(--label-font); letter-spacing: 0.12em; }
  .career-table tbody tr:not(.is-nhl) { opacity: 0.6; }
  .career-table tfoot :is(th, td) { font-weight: 800; position: sticky; bottom: 0; }

  .card-back__footer { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; align-items: center; font-size: 0.9rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
  .card-back__footer b { font-family: var(--label-font); margin-left: 0.3rem; }
  .card-back__card-number { margin-left: auto; opacity: 0.7; }

  /* ---- Modern back: dark grid stock, neon rules ---- */
  [data-edition="modern"] .big-card--back {
    --card-back-surface: #0a1020;
    background:
      linear-gradient(rgb(57 243 255 / 0.05) 1px, transparent 1px) 0 0 / 24px 24px,
      linear-gradient(90deg, rgb(57 243 255 / 0.05) 1px, transparent 1px) 0 0 / 24px 24px,
      linear-gradient(160deg, color-mix(in srgb, var(--team-primary) 35%, #0a1020), #070b17);
    box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--team-accent) 75%, transparent), inset 0 0 50px rgb(0 0 0 / 0.5);
    color: #eef3ff;
  }
  [data-edition="modern"] .card-back__number { clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); background: var(--team-accent); color: #04060d; }
  [data-edition="modern"] .card-back__name { font-style: italic; transform: skewX(-6deg); transform-origin: left; }
  [data-edition="modern"] .card-back__heading { color: var(--team-accent); }
  [data-edition="modern"] .card-back__heading::after { content: ""; display: block; height: 2px; margin-top: 0.35rem; background: linear-gradient(90deg, var(--team-accent), transparent); }
  [data-edition="modern"] .career-table { background: rgb(0 0 0 / 0.25); }
  [data-edition="modern"] .career-table thead th { background: #0d1530; color: var(--team-accent); }
  [data-edition="modern"] .career-table tbody tr:nth-child(even) { background: rgb(255 255 255 / 0.03); }
  [data-edition="modern"] .career-table tfoot :is(th, td) { background: #0d1530; border-top: 2px solid var(--team-accent); }
  [data-edition="modern"] .card-back__footer { border-top: 1px solid rgb(255 255 255 / 0.12); padding-top: 0.8rem; }
  [data-edition="modern"] .card-back__footer b { color: var(--team-accent); }

  /* ---- Vintage back: gray-brown cardboard, two-color ink ---- */
  [data-edition="vintage"] .big-card--back {
    --card-back-surface: #d8ccb2;
    --team-accent: #9b2a22;
    border-radius: 8px;
    background: var(--noise-light), linear-gradient(170deg, #ddd2b9, #d0c3a6);
    box-shadow: inset 0 0 0 1px rgb(70 45 20 / 0.45), inset 0 0 0 10px #d8ccb2, inset 0 0 0 12px #9b2a22;
    color: #2b2418;
    font-family: var(--font-serif);
    padding: clamp(1.4rem, 3.4cqw, 2.4rem);
  }
  [data-edition="vintage"] .card-back__number { border-radius: 50%; background: #9b2a22; color: #f3e8cf; font: 400 1.7rem/1 var(--font-collegiate); }
  [data-edition="vintage"] .card-back__name { color: #1f3f73; }
  [data-edition="vintage"] .card-back__heading { font-family: var(--font-collegiate); color: #9b2a22; border-bottom: 2px solid #9b2a22; padding-bottom: 0.25rem; }
  [data-edition="vintage"] .card-back__bio dt { font-family: var(--font-collegiate); color: #9b2a22; opacity: 1; }
  [data-edition="vintage"] .radar__shape { fill: rgb(31 63 115 / 0.22); stroke: #1f3f73; }
  [data-edition="vintage"] .radar__dot { fill: #1f3f73; }
  [data-edition="vintage"] .career-table thead th { background: #9b2a22; color: #f3e8cf; font-family: var(--font-collegiate); }
  [data-edition="vintage"] .career-table td, [data-edition="vintage"] .career-table tbody th { border-bottom: 1px solid rgb(70 45 20 / 0.25); }
  [data-edition="vintage"] .career-table tbody tr.is-nhl { color: #1f3f73; font-weight: 700; }
  [data-edition="vintage"] .career-table tfoot :is(th, td) { background: #cfc1a3; border-top: 2px solid #9b2a22; color: #9b2a22; }
  [data-edition="vintage"] .card-back__footer { border-top: 2px solid #9b2a22; padding-top: 0.7rem; font-family: var(--font-serif); }

  /* ---- Below the slab ---- */
  .profile__details { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr)); gap: var(--space-5); margin-top: var(--space-7); }

  .form-summary { display: flex; gap: var(--space-4); align-items: center; }
  .form-summary__grade {
    flex: none;
    display: grid;
    justify-items: center;
    width: 7.5rem;
    padding: 0.7rem;
    border-radius: 12px;
    background: #fdfdfb;
    border: 3px solid var(--cheddar);
    color: #141414;
  }
  .form-summary__number { font: 900 2.8rem/1 var(--font-label); }
  .form-summary__label { font: 700 0.72rem/1.15 var(--font-body); text-transform: uppercase; letter-spacing: 0.06em; text-align: center; }
  .form-summary__grade.is-gem .form-summary__number {
    background: linear-gradient(160deg, #8a5a12, #ffe68a 35%, #c58b1c 55%, #fff1b5 70%, #a8741a);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .form-summary__text { color: var(--ink-muted); }

  .trophy-case { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: var(--space-3); }
  .trophy {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "count name" "count seasons";
    align-items: center;
    gap: 0.15rem 0.8rem;
    padding: var(--space-3) var(--space-4);
    border-radius: 12px;
    background: var(--surface-raised);
    border: 1px solid var(--line);
  }
  .trophy__count { grid-area: count; font: 900 1.9rem/1 var(--label-font); color: var(--gold); }
  .trophy__name { grid-area: name; font-weight: 700; color: var(--ink); line-height: 1.2; }
  .trophy__seasons { grid-area: seasons; font-size: 0.82rem; color: var(--ink-muted); line-height: 1.35; }
  [data-edition="vintage"] .trophy { border-radius: 4px; background: rgb(255 255 255 / 0.4); }
  [data-edition="vintage"] .trophy__count { font-family: var(--font-collegiate); font-weight: 400; color: #9b2a22; }

  .metric-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: var(--space-3); }
  .metric-tile { padding: var(--space-3) var(--space-4); border-radius: 12px; background: var(--surface-raised); border: 1px solid var(--line); }
  .metric-tile dt { font: 700 0.68rem/1.2 var(--label-font); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); }
  .metric-tile dd { font: 900 1.9rem/1.15 var(--label-font); color: var(--ink); }
  .metric-tile p { font-size: 0.88rem; color: var(--ink-muted); line-height: 1.3; margin-top: 0.2rem; }
  [data-edition="vintage"] .metric-tile { border-radius: 4px; background: rgb(255 255 255 / 0.4); }
  [data-edition="vintage"] .metric-tile dd { font-family: var(--font-collegiate); font-weight: 400; color: #1f3f73; }

  @container (max-width: 640px) {
    .card-back__body { grid-template-columns: 1fr; }
    .card-back__bio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  @media (max-width: 720px) {
    .big-card--front { aspect-ratio: 5 / 7; }
    .card-back__body { grid-template-columns: 1fr; }
    .card-back__bio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .slab__label { grid-template-columns: 1fr auto; grid-template-areas: "text grade" "grade-text grade" "number number"; }
    .slab__grade-text { text-align: left; }
    .slab__label--back { grid-template-columns: 1fr auto; grid-template-areas: "brand qr" "number qr" "caption qr"; }
    .slab__qr-caption { justify-self: start; }
    .slab__hologram { display: none; }
  }
}