/* ===================== THE CARD, retro finishes — two Topps-style looks over the one `.pc` face =====================
   Loaded after design-system.css (which owns the face's markup, sizes, states and the picked burst); `html[data-cardv]` picks the
   finish (shared/card-version.js reads `?card=` once at boot; default imp2; imp1 = the 1977 card, imp2 = the 1993 chrome × dots in three tiers). Nothing here moves a box: the card keeps its
   5:7 board, its window, its nameplate and every state hook (`hurt`, the flag, `×N`, `[aria-pressed="true"] > .pc`).
   Every size is `calc(N * var(--cq))` (the face's own width), every colour a theme token (shared/theme.css `--rt-*`), every
   effect a transform / opacity of one pseudo-element: no filter, no layout. Reduced motion (the OS query and the Settings switch) parks
   each effect as a still highlight.

   v1  1977 CARDBOARD. A cream card stock with its fibre and worn edge, a thick frame in the TEAM'S colour round the picture
       (a cream hairline inside it), the value as a round position-circle medallion ringed in the team colour, the name in
       italic caps straight on the stock with the team's swallow-tail ribbon under it; the position code over a sunburst.
       EFFECT, a gloss-varnish glint: a soft white band sweeps the card every 7 s (each card on its own phase) and once, fast,
       when it is picked or hovered; a still varnish highlight lies across the top-left corner all the time.
   v2  1993 CHROME REFRACTOR. A silver-chrome board hairline-framed in the team colour, the picture full-bleed under stadium-light
       beams, the position code in chrome with a silver bevel, the value in a chrome shield, the name on a foil strip with the
       team in a slanted tab. EFFECT, the prism: a band of rainbow light drifts across the whole face every 5 s (faster on a pick
       or a hover), a hard top-edge sheen holds still. */

/* ---------------------------------------------------------------- shared: the two overlays, parked */
.pc::after { content: ""; position: absolute; inset: 0; z-index: 5; border-radius: inherit; pointer-events: none; }
.pc-f::before { content: ""; position: absolute; z-index: 3; pointer-events: none; opacity: 0; will-change: transform, opacity; }

/* ================================================================ v1 — 1977 CARDBOARD */
[data-cardv="imp1"] .pc-f { padding: calc(3.4 * var(--cq)) calc(3.4 * var(--cq)) calc(3 * var(--cq)); gap: calc(2.6 * var(--cq));
  background: radial-gradient(ellipse 78% 68% at 50% 46%, transparent 52%, var(--rt-stock-wear) 130%),
              radial-gradient(var(--paper-grain) .8px, transparent 1.2px) 0 0 / 4px 4px,
              radial-gradient(var(--board-fibre) .7px, transparent 1.1px) 2px 1px / 5px 5px, var(--rt-stock); }
/* the picture: a thick team-colour frame, a cream hairline just inside it, a sunburst and a dark ground under the lettering */
[data-cardv="imp1"] .pc-art { border: calc(4 * var(--cq)) solid var(--tf, var(--ink)); border-radius: calc(1.2 * var(--cq));
  outline: max(1px, calc(.5 * var(--cq))) solid color-mix(in srgb, var(--wy) 70%, transparent); outline-offset: calc(-4 * var(--cq));
  box-shadow: 0 0 0 max(1px, calc(.7 * var(--cq))) var(--ink);
  background: linear-gradient(to top, color-mix(in srgb, var(--ink) 34%, transparent) 0, transparent 40%),
              radial-gradient(ellipse 72% 62% at 50% 44%, color-mix(in srgb, var(--white) 34%, transparent), transparent 74%), var(--pcol); }
[data-cardv="imp1"] .pc-art::before { background: repeating-conic-gradient(from -4deg at 50% 56%, color-mix(in srgb, var(--white) 14%, transparent) 0 6deg, transparent 6deg 16deg);
  -webkit-mask-image: radial-gradient(circle at 50% 56%, transparent 6%, #000 90%); mask-image: radial-gradient(circle at 50% 56%, transparent 6%, #000 90%); }
/* the lettering: one flat step of extrusion, not the comic's two */
[data-cardv="imp1"] .pos-sprite text:nth-child(2) { display: none; }
/* the value: a position circle, ringed in the team's colour (an oval for a "+.31"); a picked card swaps it for the star (design-system.css) */
[data-cardv="imp1"] .pc-cn.br { right: calc(4.6 * var(--cq)); bottom: calc(4.6 * var(--cq)); min-width: calc(24 * var(--cq)); padding: calc(2.6 * var(--cq)) calc(2.8 * var(--cq)) calc(1.4 * var(--cq)); border-radius: 999px; background: var(--rt-stock);
  box-shadow: 0 0 0 max(1px, calc(.7 * var(--cq))) var(--ink), 0 0 0 calc(2.9 * var(--cq)) var(--tf, var(--paper)), 0 0 0 calc(3.6 * var(--cq)) var(--ink); }
[data-cardv="imp1"] .pc-cn.br b { font-size: calc(27 * var(--cq)); }
[data-cardv="imp1"] .pc-cn.br.mult b { font-size: calc(21 * var(--cq)); }
[data-cardv="imp1"] .pc-cn.mult { min-width: 0; padding-inline: calc(3.8 * var(--cq)); }
[data-cardv="imp1"] .pc-art .pos-sprite { transform: translate(-2%, -7%); }   /* the code rides a little high, clear of the medallion */
[data-cardv="imp1"] .pc-flag { box-shadow: none; clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%); padding-left: calc(5 * var(--cq)); }
[data-cardv="imp1"] .pc-stack { box-shadow: none; }
[data-cardv="imp1"] .pc-stack.gold { box-shadow: none; }
/* the name: italic caps on the stock itself, the team's swallow-tail ribbon under it */
[data-cardv="imp1"] .pc-band { background: none; box-shadow: none; border-radius: 0; padding: calc(.6 * var(--cq)) calc(1 * var(--cq)) 0; }
[data-cardv="imp1"] .pc-nm { font-style: italic; letter-spacing: .015em; }
[data-cardv="imp1"] .pc-tm[style] { padding: 0 calc(8 * var(--cq)) 0 calc(3 * var(--cq));
  clip-path: polygon(0 0, 100% 0, calc(100% - 4.5 * var(--cq)) 50%, 100% 100%, 0 100%); }
/* the varnish: a still highlight in the corner, and the glint that crosses the card */
[data-cardv="imp1"] .pc::after { background: linear-gradient(126deg, color-mix(in srgb, var(--white) 22%, transparent) 0, color-mix(in srgb, var(--white) 6%, transparent) 26%, transparent 38%, transparent 82%, color-mix(in srgb, var(--white) 8%, transparent) 100%); }
[data-cardv="imp1"] .pc-f::before { top: -14%; bottom: -14%; left: 0; width: 38%; transform: translateX(-150%) skewX(-16deg);
  background: linear-gradient(90deg, transparent 0, color-mix(in srgb, var(--white) 10%, transparent) 30%, color-mix(in srgb, var(--white) 52%, transparent) 50%, color-mix(in srgb, var(--white) 10%, transparent) 70%, transparent 100%);
  animation: rt-glint 7.4s linear infinite; animation-delay: calc(var(--gd, 0) * -1s); }
@keyframes rt-glint {
  0%   { opacity: 0; transform: translateX(-150%) skewX(-16deg); }
  2%   { opacity: 1; transform: translateX(-120%) skewX(-16deg); animation-timing-function: cubic-bezier(.5, 0, .3, 1); }
  14%  { opacity: 1; transform: translateX(330%) skewX(-16deg); }
  15%, 100% { opacity: 0; transform: translateX(330%) skewX(-16deg); }
}
/* picked or hovered: one quick pass, then the card is still */
[data-cardv="imp1"] [aria-pressed="true"] > .pc .pc-f::before, [data-cardv="imp1"] .hov > .pc .pc-f::before { animation: rt-glint-hit 720ms cubic-bezier(.5, 0, .3, 1) 1 both; animation-delay: 0ms; }
@keyframes rt-glint-hit { 0% { opacity: 1; transform: translateX(-150%) skewX(-16deg); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(330%) skewX(-16deg); } }

/* ================================================================ imp2 — 1993 CHROME REFRACTOR × the halftone dots, in three tiers
   The chrome board, the team line, the chrome lettering, the value shield, the foil strip and the team tab are the v2 (owner, 2026-10-30:
   "keep it"); the window's diagonal grating is gone — the BASE face's Ben-Day dots (design-system.css `.pc-art::before`) shade its foot
   again. The tier is `data-foil` on the face (shared/card-tier.js#cardFoil, cards.js#pcHTML): 0 clean chrome and dots, 1 the FOIL
   (the prism band + the top-edge sheen — 5+ YARDS, or a QB / Line past its +MULT cut), 2 the TOP tier (a gold refractor, the dots
   shimmering in gold, a sparkle twinkle round the frame, a glint across the value shield — 8+ YARDS). Only a foil card animates: the
   hand's cost is its few premium cards. */
[data-cardv="imp2"] .pc-f { padding: calc(2.6 * var(--cq)); gap: calc(2.2 * var(--cq));
  background: linear-gradient(128deg, var(--rt-chrome-1) 0, var(--rt-chrome-2) 20%, var(--rt-chrome-4) 38%, var(--rt-chrome-3) 60%, var(--rt-chrome-1) 78%, var(--rt-chrome-2) 100%); }
/* the picture: full-bleed, a soft foot, faint stadium-light beams fanned from the lower-left corner, a thin team-colour line round it */
[data-cardv="imp2"] .pc-art { border: max(1.5px, calc(1.5 * var(--cq))) solid var(--tf, var(--ink)); border-radius: 0; box-shadow: 0 0 0 max(1px, calc(.7 * var(--cq))) var(--ink);
  background: linear-gradient(to top, color-mix(in srgb, var(--ink) 20%, transparent) 0, transparent 40%),
              conic-gradient(from 0deg at 0% 100%, transparent 0 8deg, color-mix(in srgb, var(--white) 15%, transparent) 8deg 15deg, transparent 15deg 27deg, color-mix(in srgb, var(--white) 11%, transparent) 27deg 32deg, transparent 32deg 46deg, color-mix(in srgb, var(--white) 8%, transparent) 46deg 50deg, transparent 50deg 90deg),
              linear-gradient(158deg, color-mix(in srgb, var(--pcol) 72%, var(--white)) 0, var(--pcol) 52%, color-mix(in srgb, var(--pcol) 80%, var(--ink)) 100%); }
/* the dots: the base's two half-step grids, a little fuller up the window so the chrome frame has something to meet */
[data-cardv="imp2"] .pc-art::before { -webkit-mask-image: linear-gradient(to top, #000 22%, transparent 80%); mask-image: linear-gradient(to top, #000 22%, transparent 80%); }
/* the lettering in chrome: a white face over a silver bevel (the prism crosses it) */
[data-cardv="imp2"] .pos-sprite text:nth-child(1), [data-cardv="imp2"] .pos-sprite text:nth-child(2) { fill: var(--rt-chrome-3) !important; stroke: color-mix(in srgb, var(--ink) 70%, var(--rt-chrome-3)) !important; stroke-width: 1.6px !important; }
[data-cardv="imp2"] .pos-sprite text:nth-child(4) { fill: var(--rt-chrome-1) !important; }
/* the value: a chrome shield, its upper-left corner cut */
[data-cardv="imp2"] .pc-cn.br { padding: calc(2.6 * var(--cq)) calc(3 * var(--cq)) calc(1.8 * var(--cq)) calc(6 * var(--cq)); box-shadow: none; clip-path: polygon(24% 0, 100% 0, 100% 100%, 0 100%);
  background: linear-gradient(150deg, var(--rt-chrome-1) 0, var(--rt-chrome-2) 52%, var(--rt-chrome-4) 100%); }
[data-cardv="imp2"] .pc-cn.br.mult { padding-left: calc(8.5 * var(--cq)); }   /* a "+.43" is wider than a figure: the cut corner must not take the plus */
[data-cardv="imp2"] .pc-cn b { color: color-mix(in srgb, var(--wb-deep) 78%, var(--ink)); }
[data-cardv="imp2"] .pc-cn.hurt b, [data-cardv="imp2"] .pc-cn.mult b { color: color-mix(in srgb, var(--wr-deep) 82%, var(--ink)); }
[data-cardv="imp2"] [aria-pressed="true"] > .pc .pc-cn.br { clip-path: none; }   /* the star hangs off the number: nothing may clip it */
[data-cardv="imp2"] .pc-flag { box-shadow: none; clip-path: polygon(0 0, 100% 0, 100% 100%, 12% 100%); padding-left: calc(5 * var(--cq)); }
[data-cardv="imp2"] .pc-stack { box-shadow: none; }
[data-cardv="imp2"] .pc-stack.gold { box-shadow: none; }
/* the foil strip: the name in slanted caps, the team in a slanted tab */
[data-cardv="imp2"] .pc-band { background: linear-gradient(180deg, var(--rt-chrome-1) 0, var(--rt-chrome-4) 45%, var(--rt-chrome-2) 100%); border-radius: 0; padding: calc(1.6 * var(--cq)) calc(3 * var(--cq)) calc(1.8 * var(--cq)); }
[data-cardv="imp2"] .pc-nm { font-style: italic; letter-spacing: .02em; }
[data-cardv="imp2"] .pc-tm[style] { padding: 0 calc(5 * var(--cq)); clip-path: polygon(calc(3 * var(--cq)) 0, 100% 0, calc(100% - 3 * var(--cq)) 100%, 0 100%); }
/* the sheen: a hair on a plain card, the full top-edge light on a foil one */
[data-cardv="imp2"] .pc::after { background: radial-gradient(130% 52% at 50% 0%, color-mix(in srgb, var(--white) 9%, transparent) 0, transparent 70%); }
[data-cardv="imp2"] .pc:not([data-foil="0"])::after { background: radial-gradient(130% 52% at 50% 0%, color-mix(in srgb, var(--white) 24%, transparent) 0, transparent 70%); }

/* FOIL (1) at rest: the chrome board and the foil strip carry the prism's colours, a still rainbow in the metal (what a reduced-motion card keeps) */
[data-cardv="imp2"] .pc[data-foil="1"] .pc-f { background: linear-gradient(128deg, color-mix(in srgb, var(--rt-prism-1) 26%, transparent) 0, color-mix(in srgb, var(--rt-prism-2) 26%, transparent) 20%, color-mix(in srgb, var(--rt-prism-3) 26%, transparent) 40%, color-mix(in srgb, var(--rt-prism-4) 26%, transparent) 60%, color-mix(in srgb, var(--rt-prism-5) 26%, transparent) 80%, color-mix(in srgb, var(--rt-prism-1) 26%, transparent) 100%),
    linear-gradient(128deg, var(--rt-chrome-1) 0, var(--rt-chrome-2) 20%, var(--rt-chrome-4) 38%, var(--rt-chrome-3) 60%, var(--rt-chrome-1) 78%, var(--rt-chrome-2) 100%); }
[data-cardv="imp2"] .pc[data-foil="1"] .pc-band { background: linear-gradient(100deg, color-mix(in srgb, var(--rt-prism-2) 24%, transparent) 0, color-mix(in srgb, var(--rt-prism-3) 24%, transparent) 33%, color-mix(in srgb, var(--rt-prism-4) 24%, transparent) 66%, color-mix(in srgb, var(--rt-prism-5) 24%, transparent) 100%),
    linear-gradient(180deg, var(--rt-chrome-1) 0, var(--rt-chrome-4) 45%, var(--rt-chrome-2) 100%); }
/* FOIL (1) — the prism: a band of rainbow light drifting across the face */
[data-cardv="imp2"] .pc[data-foil="0"] .pc-f::before { display: none; }
[data-cardv="imp2"] .pc-f::before { top: -20%; bottom: -20%; left: 0; width: 72%; transform: translateX(-130%) skewX(-12deg); mix-blend-mode: overlay;
  background: linear-gradient(90deg, transparent 0, color-mix(in srgb, var(--rt-prism-1) 60%, transparent) 16%, color-mix(in srgb, var(--rt-prism-2) 60%, transparent) 31%, color-mix(in srgb, var(--rt-prism-3) 60%, transparent) 46%, color-mix(in srgb, var(--rt-prism-4) 60%, transparent) 61%, color-mix(in srgb, var(--rt-prism-5) 60%, transparent) 76%, transparent 100%);
  animation: rt-prism 5.2s ease-in-out infinite; animation-delay: calc(var(--gd, 0) * -.7s); }
@keyframes rt-prism {
  0%   { opacity: 0; transform: translateX(-130%) skewX(-12deg); }
  8%   { opacity: 1; }
  62%  { opacity: 1; transform: translateX(150%) skewX(-12deg); }
  70%, 100% { opacity: 0; transform: translateX(150%) skewX(-12deg); }
}
[data-cardv="imp2"] [aria-pressed="true"] > .pc .pc-f::before, [data-cardv="imp2"] .hov > .pc .pc-f::before { animation-duration: 1.9s; animation-delay: 0ms; }

/* TOP (2) — a gold refractor: the chrome turned champagne, the dots shimmering in gold, a sparkle twinkling round the frame, a glint on the shield */
[data-cardv="imp2"] .pc[data-foil="2"] { --pc-dot: color-mix(in srgb, var(--rt-gold-3) 62%, var(--pcol)); }
[data-cardv="imp2"] .pc[data-foil="2"] .pc-f { background: linear-gradient(128deg, var(--rt-gold-1) 0, var(--rt-gold-2) 20%, var(--rt-gold-4) 38%, var(--rt-gold-3) 60%, var(--rt-gold-1) 78%, var(--rt-gold-2) 100%); }
[data-cardv="imp2"] .pc[data-foil="2"] .pc-band { background: linear-gradient(180deg, var(--rt-gold-1) 0, var(--rt-gold-4) 45%, var(--rt-gold-2) 100%); }
[data-cardv="imp2"] .pc[data-foil="2"] .pc-cn.br { background: linear-gradient(150deg, var(--rt-gold-1) 0, var(--rt-gold-2) 52%, var(--rt-gold-4) 100%); }
[data-cardv="imp2"] .pc[data-foil="2"] .pos-sprite text:nth-child(1), [data-cardv="imp2"] .pc[data-foil="2"] .pos-sprite text:nth-child(2) { fill: var(--rt-gold-3) !important; }
[data-cardv="imp2"] .pc[data-foil="2"] .pos-sprite text:nth-child(4) { fill: var(--rt-gold-1) !important; }
[data-cardv="imp2"] .pc[data-foil="2"] .pc-f::before { animation-duration: 3.4s; }
[data-cardv="imp2"] .pc[data-foil="2"] .pc-art::before { animation: rt-dots 2.6s ease-in-out infinite; animation-delay: calc(var(--gd, 0) * -.4s); }
@keyframes rt-dots { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
/* the sparkle: three four-point stars (a core and two crossed slivers each) that blink together on the card's own phase */
[data-cardv="imp2"] .pc[data-foil="2"]::before { content: ""; position: absolute; inset: 0; z-index: 6; border-radius: inherit; pointer-events: none; opacity: .15; will-change: opacity;
  background:
    radial-gradient(circle calc(1.8 * var(--cq)) at 12% 9%, var(--white) 0 35%, transparent 100%), radial-gradient(ellipse calc(7 * var(--cq)) calc(.9 * var(--cq)) at 12% 9%, var(--white), transparent), radial-gradient(ellipse calc(.9 * var(--cq)) calc(7 * var(--cq)) at 12% 9%, var(--white), transparent),
    radial-gradient(circle calc(1.4 * var(--cq)) at 90% 41%, var(--white) 0 35%, transparent 100%), radial-gradient(ellipse calc(5.5 * var(--cq)) calc(.8 * var(--cq)) at 90% 41%, var(--white), transparent), radial-gradient(ellipse calc(.8 * var(--cq)) calc(5.5 * var(--cq)) at 90% 41%, var(--white), transparent),
    radial-gradient(circle calc(1.4 * var(--cq)) at 8% 71%, var(--white) 0 35%, transparent 100%), radial-gradient(ellipse calc(5.5 * var(--cq)) calc(.8 * var(--cq)) at 8% 71%, var(--white), transparent), radial-gradient(ellipse calc(.8 * var(--cq)) calc(5.5 * var(--cq)) at 8% 71%, var(--white), transparent);
  animation: rt-twinkle 2.4s ease-in-out infinite; animation-delay: calc(var(--gd, 0) * -.5s); }
@keyframes rt-twinkle { 0%, 55%, 100% { opacity: .1; } 70% { opacity: 1; } 85% { opacity: .2; } }
/* the glint across the shield (the shield's own clip keeps it inside the corner cut) */
[data-cardv="imp2"] .pc[data-foil="2"] .pc-cn.br::after { content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-130%) skewX(-18deg);
  background: linear-gradient(90deg, transparent 20%, color-mix(in srgb, var(--white) 85%, transparent) 50%, transparent 80%); animation: rt-shield 3.4s ease-in-out infinite; animation-delay: calc(var(--gd, 0) * -.6s); }
@keyframes rt-shield { 0%, 50% { transform: translateX(-130%) skewX(-18deg); } 78%, 100% { transform: translateX(130%) skewX(-18deg); } }
[data-cardv="imp2"] [aria-pressed="true"] > .pc .pc-cn.br::after { display: none; }   /* a picked card trades the shield for the star */

/* ================================================================ reduced motion: each effect parks as a still highlight */
@media (prefers-reduced-motion: reduce) {
  [data-cardv] .pc-f::before, [data-cardv] [aria-pressed="true"] > .pc .pc-f::before, [data-cardv] .hov > .pc .pc-f::before { animation: none !important; }
  [data-cardv="imp1"] .pc-f::before { opacity: .9; transform: translateX(120%) skewX(-16deg); }
  [data-cardv="imp2"] .pc-f::before { opacity: .55; transform: translateX(22%) skewX(-12deg); }
  [data-cardv="imp2"] .pc[data-foil="2"]::before { animation: none !important; opacity: .9; }
  [data-cardv="imp2"] .pc[data-foil="2"] .pc-art::before { animation: none !important; opacity: 1; }
  [data-cardv="imp2"] .pc[data-foil="2"] .pc-cn.br::after { animation: none !important; display: none; }
}
[data-motion="reduce"][data-cardv] .pc-f::before, [data-motion="reduce"][data-cardv] [aria-pressed="true"] > .pc .pc-f::before, [data-motion="reduce"][data-cardv] .hov > .pc .pc-f::before { animation: none !important; }
[data-motion="reduce"][data-cardv="imp1"] .pc-f::before { opacity: .9; transform: translateX(120%) skewX(-16deg); }
[data-motion="reduce"][data-cardv="imp2"] .pc-f::before { opacity: .55; transform: translateX(22%) skewX(-12deg); }
[data-motion="reduce"][data-cardv="imp2"] .pc[data-foil="2"]::before { animation: none !important; opacity: .9; }
[data-motion="reduce"][data-cardv="imp2"] .pc[data-foil="2"] .pc-art::before { animation: none !important; opacity: 1; }
[data-motion="reduce"][data-cardv="imp2"] .pc[data-foil="2"] .pc-cn.br::after { animation: none !important; display: none; }