@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 { padding-block: 0.5rem; 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__rookie { display: inline-block; vertical-align: 0.15em; margin-left: 0.3em; padding: 0.1em 0.4em; border-radius: 3px; background: linear-gradient(160deg, #ffe68a, #c58b1c 60%, #8a5a12); color: #1d1405; font-size: 0.6em; text-decoration: none; letter-spacing: 0.06em; }
  .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; }
  /* A Gem Mint 10 and a legend's star print in gold (the Legend mark's own design is M9's). */
  .slab__grade--gem, .slab__grade--legend {
    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 number 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; min-width: 0; 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; }
  @media (max-width: 380px) {
    .slab__brand { gap: 0.5rem; }
    .slab__brand .brand__mark { width: 2.4rem; }
    .slab__brand-name { font-size: 1.1rem; }
  }
  .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; }

  /* ---- 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; }
  /* The content scrolls inside the card's padding, so it clips short of the printed border rather
     than sliding over it. */
  .slab--back .card-back__content { min-height: 0; overflow: hidden auto; scrollbar-width: thin; }
  .slab--back .card-back__body { min-height: auto; }
  /* Wider screens: the back fits its card, the career table scrolling inside it; no stray scroll of a
     few pixels across or down. */
  @media (min-width: 641px) {
    .slab--back .card-back__content { overflow: hidden; }
    .slab--back .card-back__body { min-height: 0; }
  }

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

  /* ---- Big card, shared ---- */
  /* Clipped to its rounded corners with clip-path as well as overflow: Safari lets composited layers
     (the blend-mode foil, the clipped team panel) out past an overflow clip's rounded corner. */
  .big-card { --big-card-radius: 18px; position: relative; container-type: inline-size; color: #fff; border-radius: var(--big-card-radius); overflow: hidden; clip-path: inset(0 round var(--big-card-radius)); }
  .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;
    --badge-shape: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%);
    clip-path: var(--badge-shape);
    /* The accent fill is the border, with the dark face inset over it: an inset box-shadow only runs
       along the box, so the clip cut it off the slanted edges and left a stray tip at the point. */
    background: var(--team-accent);
  }

  [data-edition="modern"] .big-card__rating::before {
    content: "";
    position: absolute;
    inset: 2px;
    z-index: -1;
    clip-path: var(--badge-shape);
    background: linear-gradient(160deg, rgb(4 6 13 / 0.94), rgb(4 6 13 / 0.86));
  }
  .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: calc(var(--season-bar) + 2.5cqw);
    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: calc(var(--season-bar) + 2cqw); width: 11cqw; z-index: 3; filter: drop-shadow(0 0.5cqw 1cqw rgb(0 0 0 / 0.6)); }

  /* The season line is the caption strip along the bottom edge, as on the small card: up top it sat
     on the player's face. */
  [data-edition="modern"] .big-card--front { --season-bar: max(4cqw, 2rem); }
  [data-edition="modern"] .big-card__season-line {
    inset: auto 0 0;
    z-index: 3;
    display: flex;
    align-items: center;
    height: var(--season-bar);
    padding-inline: 4cqw;
    background: linear-gradient(90deg, rgb(3 5 12 / 0.85), rgb(3 5 12 / 0.45));
    border-top: 1px solid color-mix(in srgb, var(--team-accent) 55%, transparent);
    font: 700 1.5cqw/1.3 var(--font-label);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ---- Vintage front: cream stock, thick team frame, rounded photo, script team name ---- */
  [data-edition="vintage"] .big-card--front {
    --big-card-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: var(--team-vintage-secondary-ink);
  }
  [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: 46cqw; --glyph-width: 0.8; grid-area: last; font: 400 min(6cqw, var(--name-fit))/1 var(--font-slab); text-transform: uppercase; color: #2c2017; }
  /* The script team name shrinks to the room the last name and logo leave ("Detroit Red Wings" beside
     DELVECCHIO), on one line. */
  [data-edition="vintage"] .big-card__team { --team-fit: calc(32cqw / (var(--team-length, 1) * 0.42)); grid-area: team; justify-self: end; white-space: nowrap; font: 400 min(5.8cqw, var(--team-fit))/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); }

  /* A tag pinned across the photo frame's bottom edge, down by the skates rather than the face. */
  [data-edition="vintage"] .big-card__season-line {
    left: 50%;
    bottom: 17cqw;
    translate: -50% 50%;
    max-width: 80cqw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    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: minmax(0, 1fr);
    padding: clamp(1rem, 2.6cqw, 1.8rem);
    min-height: 100%;
    font-family: var(--font-body);
  }

  .card-back__content { display: grid; grid-template-rows: auto 1fr auto; gap: 1.1rem; }

  .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.38rem; text-align: right; white-space: nowrap; }
  .career-table :is(th, td):is(:first-child, .career-table__team) { text-align: left; }
  /* The team takes what the numbers leave (width: 100% claims the slack, max-width: 0 lets it give it all
     back), cut short with an ellipsis, so the table never runs wider than its card. */
  .career-table__team { width: 100%; max-width: 0; overflow: hidden; text-overflow: ellipsis; }
  /* Phones: the table fits the card (League, PIM, +/-, and a goalie's L step out; the type follows the
     card's width), so it only scrolls up and down and a sideways drag turns the card over instead. */
  @media (max-width: 560px) {
    .career-table { touch-action: pan-y; }
    .career-table .career-table__extra { display: none; }
    .career-table th, .career-table td { padding-inline: 0.2rem; }
    /* The name follows the card's width, so the longest still fits beside a smaller number. */
    .card-back__header { column-gap: 0.8rem; }
    .card-back__number { width: 3.4rem; font-size: 1.6rem; }
    .card-back__identity { min-width: 0; }
    .card-back__name { font-size: clamp(1.1rem, 7.5cqw, 1.5rem); }
    .career-table table { font-size: clamp(0.72rem, 4.4cqw, 0.92rem); }
    [data-edition="vintage"] .career-table table { font-size: clamp(0.68rem, 4cqw, 0.84rem); }
  }
  /* A season with a season card opens it. */
  .career-table__season { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 0.2em; }
  .career-table__season:hover { text-decoration-color: currentColor; }
  .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; }
  /* The totals pin to the bottom. Their color runs on below them (clipped by the scroller), so an
     overscroll bounce that lifts the bar off the edge shows more bar, not the rows underneath. */
  .career-table tfoot :is(th, td) { font-weight: 800; position: sticky; bottom: 0; z-index: 1; --totals-fill: #0d1530; box-shadow: 0 3rem 0 var(--totals-fill); }

  .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; }
  /* The skew leans the name's box past its column; the padding takes the lean. */
  [data-edition="modern"] .card-back__name { font-style: italic; transform: skewX(-6deg); transform-origin: left; }
  [data-edition="modern"] .card-back__identity { padding-inline-end: 0.3rem; }
  [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) { --totals-fill: #0d1530; background: var(--totals-fill); 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;
    --big-card-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) { --totals-fill: #cfc1a3; background: var(--totals-fill); 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); }

  @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"; }
    .slab__hologram { display: none; }

    /* A measured photo (Players::MeasureHeroImages) puts the player --photo-aim of the way across
       the window rather than at a fixed 62%. --photo-crop is the share of the 16:9 shot's width the
       portrait window shows; object-position's percent is of the width left over. The modern card
       aims right of center, clear of its angled left panel; the vintage frame is symmetric. */
    .big-card--front { --photo-crop: 0.4018; --photo-aim: 0.62; }
    [data-edition="vintage"] .big-card--front { --photo-crop: 0.4309; --photo-aim: 0.5; }
    .big-card--front.has-photo-focus .big-card__photo img:not(.is-fallback) {
      object-position: calc(clamp(0, (var(--photo-focus-x) - var(--photo-aim) * var(--photo-crop)) / (1 - var(--photo-crop)), 1) * 100%) 35%;
    }

    /* The portrait card is under half the landscape card's width, so the small cqw type would
       land at 4-6px: floor it. The season line takes the condensed face so it fits one line. */
    .big-card__rating small { font-size: max(1.3cqw, 8px); }
    [data-edition="modern"] .big-card__position-name { font-size: max(1.5cqw, 8px); }
    [data-edition="modern"] .big-card__first-name { font-size: max(2.6cqw, 10px); }
    [data-edition="modern"] .big-card__team { font-size: max(1.6cqw, 9px); }
    [data-edition="modern"] .big-card__season-line { font: 700 max(1.5cqw, 11px)/1.25 var(--font-body); letter-spacing: 0.06em; }
    [data-edition="vintage"] .big-card__first-name { font-size: max(1.9cqw, 10px); }
    [data-edition="vintage"] .big-card__rating small { font-size: max(1.4cqw, 7px); }
    [data-edition="vintage"] .big-card__season-line { max-width: 86cqw; font-size: max(1.6cqw, 11px); }
  }
}

/* ---- Season cards: picking a card, and what a season says ---- */
@layer profile {
  /* The toolbar: the player's cards (newest first) on the left, the print run on the right. About
     three seasons show; the rest scroll, with an arrow on each side that has more. */
  .profile__toolbar .edition-switch { margin-left: auto; }
  /* Unlabeled, it pads like the season picker beside it. */
  .edition-switch--unlabeled { padding-left: 4px; }
  .season-switch { display: flex; align-items: center; gap: 0.3rem; min-width: 0; max-width: min(100%, 22rem); }
  .season-switch__row { min-width: 0; }
  .season-switch__step { flex: none; width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-weight: 800; cursor: pointer; }
  .season-switch__step[hidden] { display: none; }
  .season-switch__step:hover { border-color: var(--neon); }
  [data-edition="vintage"] .season-switch__step { --ink: #2c2017; }

  /* Phones: both pickers become dropdowns, side by side. */
  .toolbar-selects { display: none; }
  .toolbar-select select { width: 100%; padding: 0.6rem 0.75rem; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-raised); font-weight: 700; }
  [data-edition="vintage"] .toolbar-select select { color: #2c2017; background: #fbf3df; }
  @media (max-width: 760px) {
    .profile__toolbar :is(.season-switch, .edition-switch) { display: none; }
    .toolbar-selects { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-3); width: 100%; }
  }

  /* Under the slab, three slots: a newer card, the flip, an older card. An empty slot keeps its
     place, so the flip stays centered. Phones shrink the flip to its icon. */
  .slab-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--space-3); width: 100%; max-width: 40rem; }
  .slab-controls__slot--newer { justify-self: end; }
  .slab-controls__slot--older { justify-self: start; }
  .slab-controls__step { display: inline-block; padding: 0.5rem 0.9rem; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-muted); font-weight: 700; text-decoration: none; white-space: nowrap; }
  .slab-controls__step:hover { color: var(--ink); border-color: var(--neon); }
  [data-edition="vintage"] .slab-controls__step { --ink: #2c2017; --ink-muted: #6f5b46; }
  .button--flip__icon { display: none; width: 1.4rem; height: 1.4rem; fill: currentColor; }
  @media (max-width: 560px) {
    .slab-controls .button--flip { min-width: 0; width: 3.2rem; height: 3.2rem; padding: 0; border-radius: 50%; }
    .button--flip__icon { display: block; }
    .button--flip__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .slab-controls__step { padding: 0.45rem 0.7rem; font-size: 0.9rem; }
  }

}


/* ---- The headshot front: a card without an action shot (Player#action_shot?), framed by its headshot's
   measurement (Headshots::Measure: .is-cutout, --headshot-edge). The card's own number block, rating, nameplate,
   logo, and season line, moved; docs/headshot-cards/. ---- */
@layer profile {
  .big-card__type-wall, .big-card__panel { display: none; }

  /* Modern: the type wall, the last name repeated in two solid tones (an outline would trace the variable font's
     overlapping contours), behind the headshot; the team panel and its laser under the type. */
  [data-edition="modern"] .big-card--portrait .big-card__type-wall {
    position: absolute; inset: -8cqw -14cqw; z-index: 0; display: grid; align-content: center; gap: 1.6cqw; rotate: -9deg;
    font: italic 900 15cqw/1 var(--font-display); text-transform: uppercase; letter-spacing: 0.04em; word-spacing: 0.25em; white-space: nowrap; pointer-events: none;
  }
  [data-edition="modern"] .big-card--portrait .big-card__type-wall span:nth-child(odd) { color: color-mix(in srgb, var(--team-accent) 26%, transparent); }
  [data-edition="modern"] .big-card--portrait .big-card__type-wall span:nth-child(even) { color: color-mix(in srgb, #fff 9%, transparent); }
  [data-edition="modern"] .big-card--portrait .big-card__panel {
    display: block; position: absolute; inset: 0; z-index: 2; clip-path: polygon(0 0, 38% 0, 30% 100%, 0 100%); opacity: 0.96;
    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) 62%, #000));
  }
  [data-edition="modern"] .big-card--portrait .big-card__photo::before { display: none; }
  [data-edition="modern"] .big-card--portrait .big-card__photo::after { background: linear-gradient(0deg, rgb(3 5 12 / 0.7) 0%, transparent 22%); }
  [data-edition="modern"] .big-card--portrait .big-card__lasers {
    background: linear-gradient(98.6deg, transparent 33.2%, var(--team-accent) 33.4%, transparent 33.7%), linear-gradient(90deg, var(--team-accent), transparent 40%) top left / 100% 3px no-repeat;
  }
  /* A cut-out stands free, solid to the season strip; a photo sits in a slanted window on its own background. */
  [data-edition="modern"] .big-card--portrait .big-card__photo img {
    position: absolute; left: 46cqw; top: 9cqw; width: 46cqw; height: calc(100% - 19cqw); object-fit: cover; object-position: center 15%;
    clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%); background: var(--headshot-edge, rgb(255 255 255 / 0.08)); mask-image: none;
  }
  [data-edition="modern"] .big-card--portrait.is-cutout .big-card__photo img {
    left: 40cqw; top: 5cqw; width: 56cqw; height: calc(100% - 5cqw - var(--season-bar)); object-fit: contain; object-position: center bottom; clip-path: none; background: none;
    filter: drop-shadow(0 1.5cqw 2.5cqw rgb(0 0 0 / 0.5));
  }
  [data-edition="modern"] .big-card--portrait .big-card__nameplate { right: 66cqw; }
  [data-edition="modern"] .big-card--portrait .big-card__last-name { --plate-width: 30cqw; font-size: min(7cqw, var(--name-fit)); }

  @media (max-width: 720px) {
    /* Phones: the panel and its laser run along the bottom under the name; the headshot sits above. */
    [data-edition="modern"] .big-card--portrait .big-card__type-wall { font-size: 20cqw; gap: 2cqw; }
    [data-edition="modern"] .big-card--portrait .big-card__panel { clip-path: polygon(0 74%, 100% 66%, 100% 100%, 0 100%); }
    [data-edition="modern"] .big-card--portrait .big-card__lasers { background: var(--team-accent); clip-path: polygon(0 73.7%, 100% 65.7%, 100% 66.3%, 0 74.3%); filter: none; }
    /* An image doesn't stretch between its insets: the boxes are given whole. */
    [data-edition="modern"] .big-card--portrait .big-card__photo img { left: 22cqw; top: 24cqw; width: 70cqw; height: calc(100% - 64cqw); }
    [data-edition="modern"] .big-card--portrait.is-cutout .big-card__photo img { left: 0; top: 14cqw; width: 100%; height: calc(100% - 44cqw); }
    [data-edition="modern"] .big-card--portrait .big-card__nameplate { right: 22cqw; }
    [data-edition="modern"] .big-card--portrait .big-card__last-name { --plate-width: 72cqw; font-size: min(12cqw, var(--name-fit)); }
  }

  /* Vintage: the card as it is, the window holding the headshot on its own background (a cut-out on the light cream
     spotlight); on a desktop the window is a portrait on the left and the type a column on the right. */
  [data-edition="vintage"] .big-card--portrait .big-card__photo { background: var(--headshot-edge, #e9dcc0); }
  [data-edition="vintage"] .big-card--portrait.is-cutout .big-card__photo { background: radial-gradient(circle at 50% 35%, #fbf4e3, color-mix(in srgb, var(--team-vintage) 22%, #e9dcc0) 75%); }
  [data-edition="vintage"] .big-card--portrait .big-card__photo img { object-fit: cover; object-position: center 20%; }

  @media (min-width: 721px) {
    [data-edition="vintage"] .big-card--portrait .big-card__photo { inset: 4cqw auto 6cqw 4cqw; width: 48cqw; border-radius: 4cqw 4cqw 1.6cqw 1.6cqw; }
    [data-edition="vintage"] .big-card--portrait .big-card__season-line { left: 28cqw; bottom: 6cqw; max-width: 44cqw; }
    [data-edition="vintage"] .big-card--portrait .big-card__nameplate {
      left: 57cqw; right: 5cqw; top: 24cqw; bottom: 4cqw;
      grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; grid-template-areas: "last" "first" "team"; row-gap: 1.4cqw;
    }
    [data-edition="vintage"] .big-card--portrait .big-card__last-name { --plate-width: 38cqw; font-size: min(8.5cqw, var(--name-fit)); }
    [data-edition="vintage"] .big-card--portrait .big-card__first-name { font-size: 2.4cqw; }
    [data-edition="vintage"] .big-card--portrait .big-card__team { --team-fit: calc(26cqw / (var(--team-length, 1) * 0.42)); align-self: end; justify-self: end; padding: 0 12cqw 1cqw 0; font-size: min(5.6cqw, var(--team-fit)); }
    [data-edition="vintage"] .big-card--portrait .big-card__logo { right: 5cqw; bottom: 4cqw; width: 10cqw; }
  }
}