/* WikiPons v9: cosmetics and identity. Owner: WP4. Scope: .cx-*, .who*, .emblem, .hovercard, .cx-ground. Linked last: the only sheet that paints (background, mask, border-image, color) .cback, .pack3, .who-ring, .who-name, .who-plate and .emblem. */

/* How an item is drawn (spec 2.2): every catalogue key has a class .cx-<key>. The key's family sets three variables,
   and each slot element (ring, plate, name, banner effect, card back, pack, tile ground) paints them its own way:
     --cx-fill  the material, top layer first: the printed parallel, the material grain, the metal
     --cx-mode  one blend mode per layer of --cx-fill
     --cx-fx    the banner effect printed over a picture (with --cx-fxmode and --cx-fxop)
   The materials are drawn in CSS (grain, emboss, engine turning, leaf, paper): no texture file is needed. */

:root {
  --tex-steel: repeating-linear-gradient(180deg, rgba(255,255,255,.08) 0 1px, rgba(255,255,255,0) 1px 3px, rgba(0,0,0,.08) 3px 4px, rgba(255,255,255,0) 4px 7px, rgba(255,255,255,.05) 7px 8px, rgba(0,0,0,0) 8px 11px);
  --tex-foil: radial-gradient(circle at 40% 40%, rgba(255,255,255,.36) 0 .7px, rgba(0,0,0,.22) 1.1px 1.5px, rgba(0,0,0,0) 1.8px) 0 0 / 5px 5px;
  --tex-guilloche: repeating-radial-gradient(circle at 18% -10%, rgba(255,255,255,.18) 0 1px, rgba(0,0,0,.12) 1px 2px, rgba(0,0,0,0) 2px 5px);
  --tex-leaf: conic-gradient(from 30deg at 38% 42%, rgba(255,255,255,.3), rgba(0,0,0,.24) 60deg, rgba(255,255,255,.2) 130deg, rgba(0,0,0,.28) 200deg, rgba(255,255,255,.32) 270deg, rgba(0,0,0,.2) 330deg, rgba(255,255,255,.3));
  --tex-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .16 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --tex-fiber: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='.04 .9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .1  0 0 0 0 .09  0 0 0 0 .08  0 0 0 .22 0'/></filter><rect width='100%' height='100%' filter='url(%23f)'/></svg>");
  --pr-hair: repeating-linear-gradient(135deg, rgba(255,255,255,.34) 0 1px, rgba(255,255,255,0) 1px 3px);
  --pr-lines: repeating-linear-gradient(135deg, rgba(255,255,255,.6) 0 1px, rgba(255,255,255,0) 1px 4px);
  --pr-waves: url("/assets/v8/waves.svg") 0 0 / 18px 9px;
  --pr-ice: url("/assets/v8/ice.svg") 0 0 / 110px 110px;
  --pr-sun: repeating-conic-gradient(from 0deg at 50% -12%, rgba(255,255,255,.55) 0deg 1.2deg, rgba(255,255,255,0) 1.2deg 3.6deg);
  --pr-rings: repeating-radial-gradient(circle at 50% 135%, rgba(255,255,255,.7) 0 1.2px, rgba(255,255,255,0) 1.2px 5px);
  --pr-rosette: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,.3) 0deg 1.4deg, rgba(255,255,255,0) 1.4deg 4.5deg);
  --pr-halftone: radial-gradient(circle, rgba(17,17,17,.6) 0 .75px, rgba(17,17,17,0) 1.15px) 0 0 / 4px 4px;
  --m-rosette: linear-gradient(150deg, #DDE6F2 0%, #6C84A6 30%, #CBD8EA 52%, #394F70 78%, #9FB3CE 100%);
  --m-iceblue: linear-gradient(150deg, #E6F5FF 0%, #4AA0DE 32%, #BFE4FF 54%, #1B5B9B 80%, #8BCBF4 100%);
  --m-onyx: linear-gradient(150deg, #3A3A46 0%, #0E0E12 28%, #4A4A58 48%, #0A0A0D 72%, #2A2A33 100%);
  --m-pearl: linear-gradient(150deg, #FFFFFF, #E6DFF2 22%, #FFFFFF 42%, #D8E6F0 62%, #F6E9EF 82%, #FFFFFF);
  --m-paper: linear-gradient(170deg, #F2EFE6, #E4E0D4);
}

/* ── the classic card back and the pack foils' shared paint (v8, moved from app.css by WP7 so that paint lives only in
   this sheet; placed first so every .cx-* recipe below still wins at equal specificity) ── */
.cback { --fill: radial-gradient(120% 80% at 50% 0%, #5B6BFF, #2B3BEA 55%, #151E9A); background: var(--chrome); }
.cback.pearl { --fill: radial-gradient(120% 80% at 50% 0%, #FFFFFF, #E5E7F0 60%, #C3C7D8); }
.cback.onyx { --fill: radial-gradient(120% 80% at 50% 0%, #34343E, #121217 70%); }
.cback.red { --fill: radial-gradient(120% 80% at 50% 0%, #FF7658, #E0361C 58%, #8E1B0B); }
.cback::before {
  background: var(--glitter), repeating-radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.07) 0 0.5cqw, rgba(255, 255, 255, 0) 0.5cqw 2.4cqw), var(--fill);
  background-blend-mode: overlay, normal, normal;
}
.cback::after, .cback.pearl::after {
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.22) 0deg 1.4deg, rgba(255, 255, 255, 0) 1.4deg 4.5deg);
  -webkit-mask: radial-gradient(closest-side, transparent 50%, #000 52% 95%, transparent 97%); mask: radial-gradient(closest-side, transparent 50%, #000 52% 95%, transparent 97%);
}
.cback.pearl::after { background: repeating-conic-gradient(from 0deg, rgba(20, 20, 40, 0.16) 0deg 1.4deg, rgba(20, 20, 40, 0) 1.4deg 4.5deg); }
.cback span { color: #fff; }
.cback.pearl span { color: #16161C; }
/* the onyx back's wordmark: one flat silver tone (it was a chrome gradient clipped to the letters, which 0.1 bans) */
.cback.onyx span { color: #D9DCE6; }
.op-card.f-charge[data-r="5"] .op-back .cback::before { background: var(--metal-5); }
.pack3.torn::after { background: radial-gradient(closest-side, #fff, rgba(255, 255, 255, 0)); }
.pack3[data-set="dark"] .pk-art.collage em { background: #FF3B30; color: #fff; }

/* ── the accent: the metal of the default ring, a tint on the title and the banner's fade (spec 2.1) ── */
.cx-acc { --acc-metal: var(--metal-0); --acc-tone: var(--p-r0); }
.cx-acc[data-accent="1"] { --acc-metal: var(--metal-1); --acc-tone: var(--p-r1); }
.cx-acc[data-accent="2"] { --acc-metal: var(--metal-2); --acc-tone: var(--p-r2); }
.cx-acc[data-accent="3"] { --acc-metal: var(--metal-3); --acc-tone: var(--p-r3); }
.cx-acc[data-accent="4"] { --acc-metal: var(--metal-4); --acc-tone: var(--p-r4); }
.cx-acc[data-accent="5"] { --acc-metal: var(--metal-5); --acc-tone: #FFFFFF; }

/* ── the 12 Icon sets: their two colors (the lead Icon picture, --art, comes from styleFor()) ── */
:is(.cx-fr_sr_football, .cx-ns_sr_football, .cx-np_sr_football, .cx-bf_sr_football, .cx-cb_set_football, .cx-em_set_football) { --ta: #34D36F; --tb: #06341A; }
:is(.cx-fr_sr_arena, .cx-ns_sr_arena, .cx-np_sr_arena, .cx-bf_sr_arena, .cx-cb_set_arena, .cx-em_set_arena) { --ta: #FF4D6D; --tb: #40071A; }
:is(.cx-fr_sr_power, .cx-ns_sr_power, .cx-np_sr_power, .cx-bf_sr_power, .cx-cb_set_power, .cx-em_set_power) { --ta: #F8C23A; --tb: #0F1E57; }
:is(.cx-fr_sr_dark, .cx-ns_sr_dark, .cx-np_sr_dark, .cx-bf_sr_dark, .cx-cb_set_dark, .cx-em_set_dark) { --ta: #FF3B30; --tb: #0A0A0A; }
:is(.cx-fr_sr_memes, .cx-ns_sr_memes, .cx-np_sr_memes, .cx-bf_sr_memes, .cx-cb_set_memes, .cx-em_set_memes) { --ta: #B7F34A; --tb: #3A0A63; }
:is(.cx-fr_sr_music, .cx-ns_sr_music, .cx-np_sr_music, .cx-bf_sr_music, .cx-cb_set_music, .cx-em_set_music) { --ta: #FF4FB3; --tb: #34061F; }
:is(.cx-fr_sr_screen, .cx-ns_sr_screen, .cx-np_sr_screen, .cx-bf_sr_screen, .cx-cb_set_screen, .cx-em_set_screen) { --ta: #9B6BFF; --tb: #1E0B45; }
:is(.cx-fr_sr_online, .cx-ns_sr_online, .cx-np_sr_online, .cx-bf_sr_online, .cx-cb_set_online, .cx-em_set_online) { --ta: #2BD9F5; --tb: #062C44; }
:is(.cx-fr_sr_crypto, .cx-ns_sr_crypto, .cx-np_sr_crypto, .cx-bf_sr_crypto, .cx-cb_set_crypto, .cx-em_set_crypto) { --ta: #FFA41B; --tb: #231302; }
:is(.cx-fr_sr_mysteries, .cx-ns_sr_mysteries, .cx-np_sr_mysteries, .cx-bf_sr_mysteries, .cx-cb_set_mysteries, .cx-em_set_mysteries) { --ta: #35E0C4; --tb: #032B28; }
:is(.cx-fr_sr_wonders, .cx-ns_sr_wonders, .cx-np_sr_wonders, .cx-bf_sr_wonders, .cx-cb_set_wonders, .cx-em_set_wonders) { --ta: #FFD65A; --tb: #3A2405; }
:is(.cx-fr_sr_science, .cx-ns_sr_science, .cx-np_sr_science, .cx-bf_sr_science, .cx-cb_set_science, .cx-em_set_science) { --ta: #4CC3FF; --tb: #07203F; }

/* ══ families: the material of each key (the slot elements below paint it) ══════════════════════ */

/* graphite: brushed steel under 135 degree hairlines (the C parallel) */
:is(.cx-fr_graphite, .cx-ps_graphite, .cx-em_tenure_30, .cx-ground[data-family="graphite"]) {
  --cx-fill: var(--pr-hair), var(--tex-steel), var(--metal-0); --cx-mode: overlay, overlay, normal;
  --cx-fx: var(--pr-hair); --cx-fxop: .5;
}
/* glitter: fine glitter over dark steel; over a picture, the glitter alone at 40% */
:is(.cx-bf_glitter, .cx-ground[data-family="glitter"]) {
  --cx-fill: var(--glitter), var(--tex-steel), linear-gradient(150deg, #44444F, #16161B 55%, #33333D); --cx-mode: overlay, overlay, normal;
  --cx-fx: var(--glitter); --cx-fxop: .55;
}
/* lines: white lines 1px every 4px (the U parallel) on the green metal */
:is(.cx-fr_lines, .cx-bf_lines, .cx-np_lines, .cx-em_tenure_100, .cx-ground[data-family="lines"]) {
  --cx-fill: var(--pr-lines), var(--tex-steel), var(--metal-1); --cx-mode: overlay, overlay, normal;
  --cx-fx: var(--pr-lines); --cx-fxop: .45;
}
/* waves (the R parallel) on embossed blue foil */
:is(.cx-fr_waves, .cx-bf_waves, .cx-ns_waves, .cx-np_waves, .cx-ground[data-family="waves"]) {
  --cx-fill: var(--pr-waves), var(--tex-foil), var(--metal-2); --cx-mode: overlay, overlay, normal;
  --cx-fx: var(--pr-waves); --cx-fxop: .55;
}
/* cracked ice (the SR parallel) on embossed purple foil */
:is(.cx-fr_ice, .cx-bf_ice, .cx-ns_ice, .cx-np_ice, .cx-ps_ice, .cx-em_tenure_365, .cx-ground[data-family="ice"]) {
  --cx-fill: var(--pr-ice), var(--tex-foil), var(--metal-3); --cx-mode: overlay, overlay, normal; --cx-line: rgba(255,255,255,.6);
  --cx-fx: var(--pr-ice); --cx-fxop: .62;
}
/* sunburst: rays from above (the UR parallel) on engine-turned orange metal */
:is(.cx-fr_sunburst, .cx-bf_sunburst, .cx-np_sunburst, .cx-ps_sunburst, .cx-em_streak_10, .cx-em_sell_100, .cx-ground[data-family="sunburst"]) {
  --cx-fill: var(--pr-sun), var(--tex-guilloche), var(--metal-4); --cx-mode: overlay, overlay, normal;
  --cx-fx: var(--pr-sun); --cx-fxop: .5;
}
/* prismatic: the printed rings of the L parallel over the prism, the angle turning slowly */
:is(.cx-fr_prism, .cx-bf_prism, .cx-np_prism, .cx-cb_prism, .cx-ps_prism, .cx-em_legend_1, .cx-em_legend_5, .cx-em_legend_10, .cx-em_legend_40, .cx-em_wins_100, .cx-ground[data-family="prism"]) {
  --cx-fill: var(--pr-rings), var(--tex-foil), var(--prism); --cx-mode: overlay, overlay, normal;
  --prism-live: conic-gradient(from var(--foil, 210deg) at 50% 40%, #FFB3C1, #FFE29A, #FFFBE0, #A8F0D0, #9AD8FF, #C4B0FF, #FFB0E6, #FFB3C1);
  --cx-fx: var(--pr-rings), var(--prism-live); --cx-fxop: .55;
}
/* shiny: dense glitter and the prism at a quarter over silver, the shiny card treatment */
:is(.cx-fr_shiny, .cx-ground[data-family="shiny"]) {
  --cx-fill: var(--glitter), var(--glitter) 40px 60px, var(--prism), var(--chrome); --cx-mode: overlay, overlay, soft-light, normal;
}
/* holder: a fine guilloche rosette on chrome (never shown before launch) */
:is(.cx-fr_holder, .cx-em_holder, .cx-ground[data-family="holder"]) {
  --cx-fill: var(--pr-rosette), var(--tex-guilloche), var(--chrome); --cx-mode: overlay, overlay, normal;
}
/* lime: lines on anodized lime */
:is(.cx-fr_lime, .cx-ns_lime, .cx-cb_lime, .cx-ps_lime, .cx-ground[data-family="lime"]) {
  --cx-fill: var(--pr-lines), var(--tex-grain), var(--metal-lime); --cx-mode: overlay, overlay, normal;
}
/* newsprint: a 4px halftone dot grid on newspaper, the picture turned grey */
:is(.cx-fr_newsprint, .cx-bf_newsprint, .cx-ns_label, .cx-np_newsprint, .cx-cb_newsprint, .cx-ps_newsprint, .cx-ground[data-family="newsprint"]) {
  --cx-fill: var(--pr-halftone), var(--tex-fiber), var(--m-paper); --cx-mode: multiply, multiply, normal; --cx-line: rgba(17,17,17,.7);
  --cx-fx: var(--pr-halftone); --cx-fxmode: multiply; --cx-fxop: .38;
}
/* crimson: glitter on crimson leaf */
:is(.cx-fr_crimson, .cx-ns_crimson, .cx-cb_crimson, .cx-ps_crimson, .cx-ground[data-family="crimson"]) {
  --cx-fill: var(--glitter), var(--tex-leaf), var(--metal-crimson); --cx-mode: overlay, overlay, normal;
}
/* rosette: concentric guilloche and the card back's conic rosette, on steel blue */
:is(.cx-fr_rosette, .cx-bf_rosette, .cx-np_rosette, .cx-ground[data-family="rosette"]) {
  --cx-fill: var(--pr-rosette), var(--tex-guilloche), var(--m-rosette); --cx-mode: overlay, overlay, normal;
  --cx-fx: var(--pr-rosette), repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.3) 0 1px, rgba(255,255,255,0) 1px 6px); --cx-fxop: .45;
}
/* blue ice: cracked ice on blue foil */
:is(.cx-fr_ice_blue, .cx-cb_ice, .cx-ground[data-family="ice_blue"]) {
  --cx-fill: var(--pr-ice), var(--tex-foil), var(--m-iceblue); --cx-mode: overlay, overlay, normal;
}
/* pearl: the Wiki gods pack foil with glitter */
:is(.cx-fr_pearl, .cx-ns_pearl, .cx-cb_pearl, .cx-ground[data-family="pearl"]) {
  --cx-fill: var(--glitter), var(--tex-grain), var(--m-pearl); --cx-mode: overlay, soft-light, normal; --cx-line: rgba(30,30,44,.45);
}
/* onyx: the PRO pack foil, black lacquer with hairlines */
:is(.cx-fr_onyx, .cx-np_onyx, .cx-cb_onyx, .cx-ground[data-family="onyx"]) {
  --cx-fill: var(--pr-hair), var(--tex-grain), var(--m-onyx); --cx-mode: soft-light, overlay, normal; --cx-line: rgba(255,255,255,.5);
}
/* silver sunburst: rays on brushed steel */
:is(.cx-fr_silver_sun, .cx-ground[data-family="silver_sun"]) {
  --cx-fill: var(--pr-sun), var(--tex-steel), var(--chrome); --cx-mode: overlay, overlay, normal;
}
/* gold edition: the daily edition foil, leaf and glitter; over a picture, the picture in luminosity over gold */
:is(.cx-fr_gold, .cx-bf_gold, .cx-ns_gold, .cx-np_gold, .cx-cb_gold, .cx-ground[data-family="gold"]) {
  --cx-fill: var(--glitter), var(--tex-leaf), var(--gold); --cx-mode: overlay, overlay, normal; --cx-line: rgba(60,36,4,.55);
  --cx-fx: var(--gold); --cx-fxmode: color; --cx-fxop: .82;
}
/* gold ice: cracked ice over the gold */
:is(.cx-fr_ice_gold, .cx-ground[data-family="ice_gold"]) {
  --cx-fill: var(--pr-ice), var(--tex-leaf), var(--gold); --cx-mode: overlay, overlay, normal;
}
/* black prism: near-black, the prism showing only through the printed rings */
:is(.cx-fr_black_prism, .cx-ground[data-family="black_prism"]) {
  --cx-fill: repeating-radial-gradient(circle at 50% 50%, rgba(11,11,13,0) 0 .9px, #0B0B0D .9px 3.2px), linear-gradient(rgba(11,11,13,.3), rgba(11,11,13,.3)), var(--prism);
  --cx-mode: normal, normal, normal; --cx-line: rgba(255,255,255,.45);
}
/* outline: the name style is type only, so its ground (shop, checkout, editor tiles) is plain steel ruled with fine
   white lines, like the paper of the home word wall; without it the tile painted flat --panel-2, near black */
:is(.cx-ground[data-family="outline"]) {
  --cx-fill: repeating-linear-gradient(0deg, rgba(255,255,255,.22) 0 1px, rgba(255,255,255,0) 1px 9px), var(--tex-steel), var(--metal-0); --cx-mode: overlay, overlay, normal;
}
/* series and set items: the set's two colors on card stock, its lead Icon printed in luminosity */
:is([class*="cx-fr_sr_"], [class*="cx-ns_sr_"], [class*="cx-np_sr_"], [class*="cx-bf_sr_"], [class*="cx-cb_set_"], [class*="cx-em_set_"], .cx-ground[data-family="series"], .cx-ground[data-family="set"]) {
--m-set: linear-gradient(150deg, color-mix(in oklab, var(--ta, #9AA5FF) 70%, #fff) 0%, var(--ta, #9AA5FF) 20%, color-mix(in oklab, var(--ta, #9AA5FF) 55%, var(--tb, #1A1F4A)) 42%, var(--tb, #1A1F4A) 68%, color-mix(in oklab, var(--ta, #9AA5FF) 65%, var(--tb, #1A1F4A)) 100%);
  --cx-fill: var(--pr-hair), var(--art, linear-gradient(transparent, transparent)) center / cover no-repeat, var(--tex-fiber), var(--m-set);
  --cx-mode: overlay, luminosity, overlay, normal;
  --cx-fx: var(--pr-hair), linear-gradient(150deg, var(--ta, #9AA5FF), var(--tb, #1A1F4A)); --cx-fxmode: overlay; --cx-fxop: .72;
}
/* classic: today's blue back and blue pack */
:is(.cx-cb_classic, .cx-ps_classic, .cx-ground[data-family="classic"]) {
  --cx-fill: var(--glitter), var(--tex-foil), radial-gradient(120% 80% at 50% 0%, #5B6BFF, #2B3BEA 55%, #151E9A); --cx-mode: overlay, overlay, normal;
}
/* marathon: 30 tick marks on steel */
:is(.cx-cb_marathon, .cx-ground[data-family="marathon"]) {
  --cx-fill: var(--pr-hair), var(--tex-steel), linear-gradient(150deg, #5A5E70, #22242E 50%, #464A5C); --cx-mode: overlay, overlay, normal;
}
/* the showcase cases: clear acrylic with fine scratches */
:is(.cx-cs_toploader, .cx-cs_onetouch, .cx-cs_slab, .cx-ground[data-family="acrylic"]) {
  --cx-fill: repeating-linear-gradient(115deg, rgba(255,255,255,.07) 0 1px, rgba(255,255,255,0) 1px 23px), repeating-linear-gradient(35deg, rgba(255,255,255,.05) 0 1px, rgba(255,255,255,0) 1px 31px), linear-gradient(150deg, #2A2C36, #15161C 60%, #22242C);
  --cx-mode: normal, normal, normal;
}
/* emblem discs that are no item family: the X disc and plain chrome */
.emblem[data-disc="black"] { --cx-fill: var(--tex-grain), linear-gradient(150deg, #2A2A30, #050506 60%, #1A1A1F); --cx-mode: overlay, normal; }
.emblem[data-disc="chrome"] { --cx-fill: var(--pr-rosette), var(--chrome); --cx-mode: overlay, normal; }

/* ══ <Who> ═══════════════════════════════════════════════════════════════════════════════════ */
.who { display: inline-flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; color: var(--text); text-decoration: none; vertical-align: middle; -webkit-touch-callout: none; }
.who.xs { gap: 6px; }
.who.md { gap: 12px; }
.who.only { gap: 0; }
a.who:focus-visible { border-radius: 10px; }
.who-text { display: grid; min-width: 0; line-height: 1.15; }
.who-text.two { grid-template-rows: auto auto; row-gap: 2px; }
/* a reserved title line with no title yet (or none at all): the name sits centered on the avatar, the box keeps its
   height so nothing shifts when a title arrives (half of the 13px title line and its 2px gap) */
.who-text.two .who-name { transition: color 160ms ease, transform 160ms var(--p-ease-out); }
.who-text.two.nt .who-name { transform: translateY(8.5px); }
.who-name { position: relative; display: block; min-width: 0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: .08em; color: var(--text); text-shadow: 0 1px 0 rgba(0,0,0,.45); transition: color 160ms ease; }
.who.xs .who-name { font-size: 13px; font-weight: 600; text-shadow: none; }
.who.sm .who-name { font-size: 15px; font-weight: 700; }
.who.md .who-name { font-size: 18px; font-weight: 800; }
.who-title { display: block; min-width: 0; font-size: 13px; font-weight: 500; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who-emblems { display: inline-flex; gap: 4px; flex: none; }

/* the picture in its frame: the ring width and the tier silhouette (C and U a plain ring, R and SR a ring with a fine
   inner line, UR a double ring, L a double ring broken by 4 notches) read at 20px */
.who-av { --av: 32px; --rw: 4px; position: relative; flex: none; display: block; width: var(--av); height: var(--av); border-radius: 50%; }
.who-av[data-size="xs"] { --av: 20px; --rw: 3px; }
.who-av[data-size="sm"] { --av: 32px; --rw: 4px; }
.who-av[data-size="md"] { --av: 44px; --rw: 5px; }
.who-av[data-size="lg"] { --av: 112px; --rw: 8px; }
.who-av[data-size="p1"] { --av: 64px; --rw: 6px; }
.who-av[data-size="p2"] { --av: 150px; --rw: 10px; }
.who-av[data-size="p3"] { --av: 170px; --rw: 11px; }
@media (max-width: 860px) { .who-av[data-size="lg"] { --av: 84px; --rw: 7px; } }
.who-pic { position: absolute; inset: var(--rw); z-index: 1; border-radius: 50%; overflow: hidden; background: #0E0E12; box-shadow: 0 0 0 max(1px, calc(var(--rw) * .28)) rgba(8,8,12,.85); }
.who-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.who-pic.disc { display: grid; place-items: center; background: var(--acc-metal); }
.who-pic.disc i { font-style: italic; font-stretch: 75%; font-weight: 900; font-size: calc(var(--av) * .44); line-height: 1; color: #0B0B0D; padding-right: .06em; }
.who-online { position: absolute; right: -1px; bottom: -1px; z-index: 2; width: max(8px, calc(var(--av) * .26)); height: max(8px, calc(var(--av) * .26)); border-radius: 50%; background: var(--good); box-shadow: 0 0 0 2px var(--bg); }

.who-ring {
  --ro: 0px;
  position: absolute; inset: calc(var(--ro) * -1); border-radius: 50%; pointer-events: none; overflow: hidden;
  background: var(--cx-fill, var(--metal-0)); background-blend-mode: var(--cx-mode, normal);
  -webkit-mask: radial-gradient(closest-side, #0000 calc(100% - var(--rw) - .5px), #000 calc(100% - var(--rw)));
  mask: radial-gradient(closest-side, #0000 calc(100% - var(--rw) - .5px), #000 calc(100% - var(--rw)));
}
.who-ring.cx-metal { --cx-fill: var(--acc-metal); --cx-mode: normal; }
.who-av[data-tier="2"] .who-ring, .who-av[data-tier="3"] .who-ring {
  background: radial-gradient(closest-side, #0000 calc(100% - var(--rw) * .48 - .6px), var(--cx-line, rgba(8,8,12,.72)) calc(100% - var(--rw) * .48 - .6px) calc(100% - var(--rw) * .48 + .6px), #0000 calc(100% - var(--rw) * .48 + .6px)), var(--cx-fill, var(--metal-0));
  background-blend-mode: normal, var(--cx-mode, normal);
}
.who-av[data-tier="4"] .who-ring, .who-av[data-tier="5"] .who-ring {
  --ro: calc(var(--rw) * .75);
  -webkit-mask: radial-gradient(closest-side, #0000 calc(100% - var(--ro) - var(--rw) - .5px), #000 calc(100% - var(--ro) - var(--rw)) calc(100% - var(--ro)), #0000 calc(100% - var(--ro) + .5px) calc(100% - var(--rw) * .42 - .5px), #000 calc(100% - var(--rw) * .42));
  mask: radial-gradient(closest-side, #0000 calc(100% - var(--ro) - var(--rw) - .5px), #000 calc(100% - var(--ro) - var(--rw)) calc(100% - var(--ro)), #0000 calc(100% - var(--ro) + .5px) calc(100% - var(--rw) * .42 - .5px), #000 calc(100% - var(--rw) * .42));
}
.who-av[data-tier="5"] .who-ring {
  -webkit-mask: radial-gradient(closest-side, #0000 calc(100% - var(--ro) - var(--rw) - .5px), #000 calc(100% - var(--ro) - var(--rw)) calc(100% - var(--ro)), #0000 calc(100% - var(--ro) + .5px) calc(100% - var(--rw) * .42 - .5px), #000 calc(100% - var(--rw) * .42)), repeating-conic-gradient(from 40deg, #000 0deg 80deg, #0000 80deg 90deg);
  -webkit-mask-composite: source-in;
  mask: radial-gradient(closest-side, #0000 calc(100% - var(--ro) - var(--rw) - .5px), #000 calc(100% - var(--ro) - var(--rw)) calc(100% - var(--ro)), #0000 calc(100% - var(--ro) + .5px) calc(100% - var(--rw) * .42 - .5px), #000 calc(100% - var(--rw) * .42)), repeating-conic-gradient(from 40deg, #000 0deg 80deg, #0000 80deg 90deg);
  mask-composite: intersect;
}
/* the shimmer follows the pointer on md and lg ([data-tilt], the card listener sets --gx and --gy) */
.who-av[data-tilt] .who-ring::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at var(--gx, 30%) var(--gy, 18%), rgba(255,255,255,.55), rgba(255,255,255,0) 48%); mix-blend-mode: overlay; }

/* the nameplate: full strength on the left 45% of the row under a dark scrim, so the name keeps 4.5:1 */
.who.plated { position: relative; isolation: isolate; padding: 6px 14px 6px 6px; border-radius: 12px; }
.who-plate {
  position: absolute; inset: 0; z-index: -1; border-radius: inherit; overflow: hidden; pointer-events: none;
  background: linear-gradient(90deg, rgba(11,11,13,var(--plate-scrim, .4)), rgba(11,11,13,.82) 45%, var(--plate-end, var(--panel)) 70%), var(--cx-fill, var(--metal-0));
  background-blend-mode: normal, var(--cx-mode, normal);
}
/* bright materials get a darker scrim at the left, so the name and the title keep 4.5:1 */
.who-plate:is(.cx-np_newsprint, .cx-np_gold) { --plate-scrim: .66; }
.who-plate:is(.cx-np_lines, .cx-np_waves, .cx-np_ice, .cx-np_rosette, .cx-np_prism, .cx-np_sunburst) { --plate-scrim: .5; }
.who-plate[class*="cx-np_sr_"] { --plate-scrim: .58; }
/* a row that hosts a plated <Who> paints the plate across the whole row */
.cx-row { position: relative; isolation: isolate; overflow: hidden; }
.cx-row .who.plated { position: static; padding: 0; isolation: auto; }

/* the look arrives: the frame, the plate and the style fade in over 160ms, nothing moves */
.who.fresh .who-ring, .who.fresh .who-plate, .who.fresh .who-name::after { animation: cx-in 160ms ease-out both; }
@keyframes cx-in { from { opacity: 0; } }

/* ══ name styles: printed ink or foil stamping, never a gradient (spec 2.5) ═══════════════════════
   Ink: one solid color, the parallel's pattern printed inside the letters by a second, masked text layer.
   Foil: one flat metal tone, the material clipped to the letters, one highlight band that moves on hover and in the sweep. */
.who-name[class*="cx-ns_"]::after {
  content: attr(data-text); position: absolute; inset: 0; padding: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-shadow: none; pointer-events: none;
}
/* ink */
.who-name.cx-ns_lime { color: #E3F36B; }
.who-name.cx-ns_lime::after { color: #A9BA3C; -webkit-mask: var(--pr-lines); mask: var(--pr-lines); }
.who-name.cx-ns_waves { color: #7D8AFF; }
.who-name.cx-ns_waves::after { color: #C4CAFF; -webkit-mask: var(--pr-waves); mask: var(--pr-waves); }
.who-name.cx-ns_ice { color: #F5F5F7; }
.who-name.cx-ns_ice::after { color: #A7A0D8; -webkit-mask: url("/assets/v8/ice.svg") 0 0 / 70px 70px; mask: url("/assets/v8/ice.svg") 0 0 / 70px 70px; }
.who-name[class*="cx-ns_sr_"] { color: var(--ta, #9AA5FF); }
.who-name[class*="cx-ns_sr_"]::after { color: color-mix(in oklab, var(--ta, #9AA5FF) 58%, #000); -webkit-mask: var(--pr-hair); mask: var(--pr-hair); }
/* foil stamping: the letters are one flat metal tone; the ::after layer clips the material grain (glitter, leaf) to
   the same letters, and carries the single highlight band, parked off the letters until hover or the sweep */
:is(.who-name.cx-ns_gold, .who-name.cx-ns_crimson, .who-name.cx-ns_pearl)::after {
  color: transparent; -webkit-background-clip: text; background-clip: text;
  background: linear-gradient(105deg, rgba(255,255,255,0) 42%, rgba(255,255,255,.85) 50%, rgba(255,255,255,0) 58%) 100% 0 / 300% 100% no-repeat, var(--glitter), var(--tex-leaf);
  -webkit-background-clip: text; background-clip: text; opacity: .9;
  transition: background-position 700ms var(--p-ease-out);
}
.who-name.cx-ns_gold { color: #E3BA5E; }
.who-name.cx-ns_crimson { color: #F0553A; }
.who-name.cx-ns_pearl { color: #EDE9F4; }
.who-name.cx-ns_pearl::after { opacity: .55; }
@media (hover: hover) and (pointer: fine) {
  :is(a.who, .who-hero, .ed-tile, .hovercard):hover :is(.who-name.cx-ns_gold, .who-name.cx-ns_crimson, .who-name.cx-ns_pearl)::after { background-position: 0 0, 0 0, 0 0; }
}
/* outline: transparent fill, a 1.2px white stroke */
.who-name.cx-ns_outline { color: transparent; -webkit-text-stroke: 1.2px #F5F5F7; text-shadow: none; }
/* at 15 to 18px a hollow letter blurs on a 1x screen: a whole-pixel rim over a dim body keeps it readable and still outlined */
.who:is(.sm, .md) .who-name.cx-ns_outline, .hovercard-name .who-name.cx-ns_outline { color: rgba(245,245,247,.3); -webkit-text-stroke-width: 1px; font-weight: 800; letter-spacing: 0; }
.who-name.cx-ns_outline::after { content: none; }
/* label: black condensed capitals on an off-white label, like a label maker */
.who-name.cx-ns_label {
  justify-self: start; max-width: 100%; padding: .06em .34em .04em .3em; border-radius: .14em; color: #111114; text-shadow: none;
  font-stretch: 75%; text-transform: uppercase; letter-spacing: .01em;
  background: var(--tex-fiber), var(--m-paper); box-shadow: inset 0 -1px 0 rgba(0,0,0,.12), 0 1px 0 rgba(0,0,0,.5);
}
.who-name.cx-ns_label::after { content: none; }
/* black prism: black letters with a thin prismatic keyline */
.who-name.cx-ns_black_prism {
  color: #0B0B0D;
  text-shadow: 1px 0 0 #FFB3C1, -1px 0 0 #9AD8FF, 0 1px 0 #FFE29A, 0 -1px 0 #C4B0FF, .7px .7px 0 #A8F0D0, -.7px -.7px 0 #FFB0E6, .7px -.7px 0 #FFFBE0, -.7px .7px 0 #C4B0FF;
}
.who-name.cx-ns_black_prism::after { content: none; }
.who:is(.sm, .md) .who-name.cx-ns_black_prism, .hovercard-name .who-name.cx-ns_black_prism { font-weight: 800; letter-spacing: .02em; }

/* ══ emblems: chrome medallions (spec 2.7) ═══════════════════════════════════════════════════ */
.emblem {
  --em: 28px;
  position: relative; flex: none; display: inline-grid; place-items: center; width: var(--em); height: var(--em); border-radius: 50%;
  background: var(--chrome); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -1px 0 rgba(0,0,0,.3), 0 2px 6px -2px rgba(0,0,0,.8);
  color: #FFFFFF; font-size: calc(var(--em) * .36); line-height: 1;
}
.emblem::before {
  content: ''; position: absolute; inset: calc(var(--em) * .09); border-radius: 50%;
  background: var(--cx-fill, var(--metal-0)); background-blend-mode: var(--cx-mode, normal);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.5), inset 0 0 0 .5px rgba(0,0,0,.4);
}
.emblem > * { position: relative; z-index: 1; }
.emblem b { font-style: italic; font-stretch: 75%; font-weight: 900; font-size: calc(var(--em) * .42); letter-spacing: -.01em; padding-right: .06em; }
.emblem[data-kind="tenure"] b { font-size: calc(var(--em) * .3); }
.emblem svg { width: 46%; height: 46%; fill: currentColor; }
.emblem img { width: 58%; height: 58%; object-fit: contain; }
.emblem[data-disc="prism"], .emblem[data-disc="graphite"], .emblem[data-disc="lines"] { color: #0B0B0D; }
.emblem[data-disc="sunburst"], .emblem[data-disc="ice"], .emblem[data-disc="black"] { color: #FFFFFF; }
.emblem[data-disc="sunburst"] > *, .emblem[data-disc="ice"] > * { filter: drop-shadow(0 1px 0 rgba(0,0,0,.45)); }
/* set medals: the set's color on the rim, its lead Icon printed in luminosity on the face */
.emblem[data-kind="set"] { background: linear-gradient(150deg, color-mix(in oklab, var(--ta, #9AA5FF) 55%, #fff), var(--ta, #9AA5FF) 45%, color-mix(in oklab, var(--ta, #9AA5FF) 60%, #000)); }
.emblem[data-kind="set"]::before { background: var(--art, linear-gradient(transparent, transparent)) center / cover no-repeat, var(--tex-fiber), linear-gradient(150deg, #F2F3F8, #B9BDCB); background-blend-mode: luminosity, multiply, normal; }

/* ══ <Banner> ═══════════════════════════════════════════════════════════════════════════════ */
.cx-banner { position: relative; isolation: isolate; overflow: hidden; height: 100%; border-radius: inherit; background: var(--panel); }
.cx-banner > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cx-banner[data-fx="newsprint"] > img { filter: grayscale(1) contrast(1.12); }
.cx-banner-rosette { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.cx-banner-rosette::before {
  content: ''; position: absolute; left: 70%; top: 50%; height: 170%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background: var(--acc-metal, var(--metal-0)); opacity: .1;
  -webkit-mask: repeating-conic-gradient(from 0deg, #000 0deg 1.4deg, transparent 1.4deg 4.5deg), radial-gradient(closest-side, transparent 50%, #000 52% 95%, transparent 97%);
  -webkit-mask-composite: source-in;
  mask: repeating-conic-gradient(from 0deg, #000 0deg 1.4deg, transparent 1.4deg 4.5deg), radial-gradient(closest-side, transparent 50%, #000 52% 95%, transparent 97%);
  mask-composite: intersect;
}
.cx-banner-rosette::after {
  content: ''; position: absolute; left: 70%; top: 50%; height: 78%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background: var(--acc-metal, var(--metal-0)); opacity: .07;
  -webkit-mask: repeating-radial-gradient(closest-side, #000 0 1px, transparent 1px 6px); mask: repeating-radial-gradient(closest-side, #000 0 1px, transparent 1px 6px);
}
.pf-banner-fx { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--cx-fx, var(--pr-hair)); mix-blend-mode: var(--cx-fxmode, overlay); opacity: var(--cx-fxop, .45); overflow: hidden; }
.pf-banner-fx.cx-bf_prism { animation: foil-turn 14s linear infinite; }
.cx-credit { position: absolute; right: 12px; bottom: 10px; z-index: 3; margin: 0; max-width: min(72%, 560px); font-size: 13px; line-height: 1.35; color: rgba(245,245,247,.88); text-align: right; text-shadow: 0 1px 2px rgba(0,0,0,.85); }
.cx-credit a, .cx-link { color: inherit; font: inherit; padding: 0; border: 0; background: none; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(245,245,247,.45); cursor: pointer; }
.cx-credit.pop { right: 8px; bottom: 34px; max-width: calc(100% - 16px); padding: 8px 10px; border-radius: 10px; background: rgba(12,12,16,.92); text-align: left; text-shadow: none; }
.cx-info { position: absolute; right: 8px; bottom: 8px; z-index: 3; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(10,10,14,.72); color: #fff; }
.cx-info svg { width: 14px; height: 14px; fill: currentColor; }
.cx-info::after { content: ''; position: absolute; inset: -12px; }

/* ══ the profile hero (spec 3.3): the loudest surface of the page ══════════════════════════════ */
.who-hero { position: relative; }
.who-hero > .cx-banner { height: 280px; border-radius: var(--r-banner); }
.who-hero > .cx-banner::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(11,11,13,0) 45%, color-mix(in oklab, var(--hero-bg, var(--bg)) 88%, var(--acc-tone)) 84%, var(--hero-bg, var(--bg)));
}
.who-hero > .cx-banner .cx-credit { bottom: 64px; }
.who-hero-id { position: relative; z-index: 3; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; gap: 22px; margin-top: -56px; padding: 0 24px; }
.who-hero-text { min-width: 0; padding-bottom: 4px; }
.who-hero-text .who-name { font-size: 44px; line-height: .95; font-style: italic; font-stretch: 75%; font-weight: 900; text-transform: uppercase; letter-spacing: 0; margin: 0; padding: .04em .12em .04em 0; }
.who-hero-text .who-name.cx-ns_black_prism { text-shadow: 1.5px 0 0 #FFB3C1, -1.5px 0 0 #9AD8FF, 0 1.5px 0 #FFE29A, 0 -1.5px 0 #C4B0FF, 1px 1px 0 #A8F0D0, -1px -1px 0 #FFB0E6, 1px -1px 0 #FFFBE0, -1px 1px 0 #C4B0FF; }
.who-hero-text .who-name.cx-ns_outline { -webkit-text-stroke-width: 1.6px; }
.who-hero-title { margin: 6px 0 0; font-size: 16px; font-weight: 600; color: color-mix(in oklab, var(--text-2) 86%, var(--acc-tone)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 12px; font-size: 14px; color: var(--text-2); }
.who-hero-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; padding-bottom: 6px; }
.who-hero.compact > .cx-banner { height: 150px; border-radius: 18px; }
.who-hero.compact .who-hero-id { margin-top: -42px; padding: 0 16px; gap: 14px; }
.who-hero.compact .who-av[data-size="lg"] { --av: 84px; --rw: 7px; }
.who-hero.compact .who-hero-text .who-name { font-size: 30px; }
.who-hero.compact .who-hero-title { font-size: 14px; margin-top: 4px; }
@media (max-width: 860px) {
  .who-hero > .cx-banner { height: 180px; }
  .who-hero > .cx-banner .cx-credit { bottom: auto; top: 10px; }
  .who-hero-id { grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding: 0 4px; margin-top: -44px; }
  .who-hero-text .who-name { font-size: 32px; }
  .who-hero-title { font-size: 15px; }
  .who-hero-actions { grid-column: 1 / -1; justify-content: flex-start; }
  /* the full hero on a phone: the avatar overlaps the banner, the name, title and meta stack under it, then the actions
     (the compact hero of the checkout and the bundle keeps the name beside the avatar) */
  .who-hero:not(.compact) .who-hero-id { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: -42px; }
  .who-hero:not(.compact) .who-hero-id > .who-av { justify-self: start; }
}

/* ══ the hover card (spec 3.4) ═════════════════════════════════════════════════════════════════ */
.hovercard {
  position: fixed; z-index: 75; width: 320px; max-width: calc(100vw - 24px); border-radius: 18px; overflow: hidden;
  background: var(--overlay); box-shadow: var(--shadow-pop), inset 0 0 0 1px var(--border-hi);
  transition: opacity 160ms var(--p-ease-out), transform 160ms var(--p-ease-out);
}
.hovercard[data-state="measure"] { top: 0; left: 0; visibility: hidden; opacity: 0; transform: translateY(4px) scale(.97); }
.hovercard[data-state="leaving"] { opacity: 0; transform: scale(.97); transition-duration: 120ms; transition-timing-function: ease-out; pointer-events: none; }
.hovercard-body { position: relative; }
.hovercard-body > .cx-banner { height: 96px; border-radius: 0; }
.hovercard-body > .cx-banner::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(23,23,27,0) 40%, var(--overlay)); }
.hovercard-id { position: relative; z-index: 3; display: flex; align-items: flex-end; gap: 12px; margin-top: -24px; padding: 0 16px; }
.hovercard-name { display: grid; min-width: 0; line-height: 1.15; padding-bottom: 2px; }
.hovercard-name .who-name { font-size: 18px; font-weight: 800; }
.hovercard-emblems { display: flex; gap: 6px; padding: 12px 16px 0; }
.hovercard-bio { margin: 10px 16px 0; font-size: 14px; line-height: 1.45; color: var(--text); overflow-wrap: anywhere; }
.hovercard-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 14px 16px 0; padding: 12px 0 0; border-top: 1px solid var(--border); }
.hovercard-nums span { display: grid; gap: 2px; min-width: 0; }
.hovercard-nums b { font-stretch: 75%; font-weight: 900; font-size: 24px; line-height: 1; font-variant-numeric: proportional-nums; }
.hovercard-nums small { font-size: 13px; color: var(--text-2); line-height: 1.25; }
.hovercard-nums:last-child { padding-bottom: 16px; }
.hovercard-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 16px 16px; }
.hovercard-note { align-self: center; font-size: 13px; color: var(--text-2); }

/* ══ a leaderboard row (the editor preview, the nameplate preview) ══════════════════════════════ */
.cx-lrow { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 58px; padding: 9px 16px 9px 12px; border-radius: 14px; background: var(--panel); }
.cx-lrow.me { --plate-end: var(--panel-3); background: var(--panel-3); }
.cx-lrow-rank { font-stretch: 75%; font-weight: 900; font-size: 18px; color: var(--text-2); text-align: center; }
.cx-lrow-score { font-weight: 800; font-size: 15px; white-space: nowrap; }
.cx-lrow-score small { font-weight: 600; font-size: 13px; color: var(--text-2); }
.cx-lrow .who { min-width: 0; }

/* ══ <ItemPreview>: one item on the viewer's identity ══════════════════════════════════════════ */
.cx-prev { position: relative; width: 100%; height: 100%; display: grid; place-items: center; min-width: 0; }
.cx-prev.s-banner_fx .cx-banner, .cx-prev.s-banner .cx-banner { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 12px; box-shadow: 0 16px 30px -18px rgba(0,0,0,.9); }
.cx-prev.sm.s-banner_fx .cx-banner, .cx-prev.sm.s-banner .cx-banner { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; border-radius: 0; box-shadow: none; }
.cx-poster { display: block; width: 100%; overflow: hidden; text-align: center; container-type: inline-size; }
/* the name fits its box whatever its length (--len from ItemPreview): about .46em a letter in condensed italic capitals */
.cx-poster .who-name { --fit: calc(205cqw / (var(--len, 8) + 1)); }
.cx-poster .who-name { display: inline-block; max-width: none; overflow: visible; font-style: italic; font-stretch: 75%; font-weight: 900; text-transform: uppercase; line-height: .9; font-size: min(68px, var(--fit)); padding: .06em .14em; }
.cx-prev.sm .cx-poster .who-name { font-size: min(24px, var(--fit)); }
.cx-prev.lg .cx-poster .who-name { font-size: min(76px, var(--fit)); }
.cx-prev.sm .cx-poster .who-name.cx-ns_black_prism { text-shadow: .8px 0 0 #FFB3C1, -.8px 0 0 #9AD8FF, 0 .8px 0 #FFE29A, 0 -.8px 0 #C4B0FF; }
.cx-prev.s-nameplate .cx-lrow { width: 72%; zoom: 1.4; }
/* in a shop tile (md, about 370px) the row keeps the rank and the name; the score would squeeze the name out */
.cx-prev.md.s-nameplate .cx-lrow { width: min(86%, 300px); zoom: 1.2; grid-template-columns: 34px minmax(0, 1fr); }
.cx-prev.md.s-nameplate .cx-lrow-score { display: none; }
/* in a narrow shop tile (phones, tablets) the plate shows only the face and the name: the rank and the 1.2 zoom would squeeze the name to nothing */
@container (max-width: 260px) {
  .cx-prev.md.s-nameplate .cx-lrow { width: 96%; zoom: 1; grid-template-columns: minmax(0, 1fr); padding: 8px 12px; }
  .cx-prev.md.s-nameplate .cx-lrow-rank { display: none; }
}
.cx-prev.sm.s-nameplate .cx-lrow { width: 190px; zoom: .56; grid-template-columns: minmax(0, 1fr); padding: 8px 10px; }
.cx-prev.sm.s-nameplate .cx-lrow-rank, .cx-prev.sm.s-nameplate .cx-lrow-score { display: none; }
.cx-prev.s-title { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 0 12px; text-align: center; }
.cx-t-name { font-weight: 700; font-size: 22px; color: var(--text); }
.cx-t-title { font-style: italic; font-stretch: 75%; font-weight: 900; font-size: 30px; line-height: .95; text-transform: uppercase; color: #FFFFFF; }
.cx-prev.sm .cx-t-name { font-size: 13px; } .cx-prev.sm .cx-t-title { font-size: 16px; }
.cx-fan { position: relative; width: 44%; aspect-ratio: 5 / 7; }
.cx-fan .cback { position: absolute; inset: 0; }
.cx-fan .cback:first-child { transform: rotate(-6deg) translate(-22%, 2%); }
.cx-fan .cback:last-child { transform: rotate(4deg) translate(20%, -2%); }
.cx-fan .cback:first-child span { visibility: hidden; }
.cx-prev.sm .cx-fan { width: 40%; }
/* in a wide box the fan is sized from the height, so it never overflows (the checkout stage) */
.cx-prev.lg .cx-fan { width: auto; height: 90%; max-width: 70%; }
.cx-packwrap { height: 86%; aspect-ratio: .6; display: grid; place-items: center; }
.cx-packwrap .pack3 { width: auto; height: 100%; aspect-ratio: .6; filter: drop-shadow(0 12px 16px rgba(0,0,0,.55)); }
.cx-prev.s-case .cx-case { height: 92%; }
.cx-prev.m-profile, .cx-prev.m-hover { align-content: start; place-items: stretch; }
.cx-prev.m-hover .hovercard-body { width: 320px; max-width: 100%; justify-self: center; border-radius: 18px; overflow: hidden; background: var(--overlay); box-shadow: var(--shadow-pop); }
.cx-prev.m-row { padding: 0 12px; }
.cx-prev.m-row .cx-lrow { width: 100%; }

/* ══ showcase cases (spec 2.8): clear plastic, never a glow ═══════════════════════════════════════ */
.cx-case { position: relative; aspect-ratio: 5 / 7; display: grid; }
.cx-case-card { position: relative; min-width: 0; }
.cx-case-card .card { width: 100%; }
.cx-case.cx-cs_toploader { aspect-ratio: auto; border-radius: 4.5% / 3.2%; background: var(--cx-fill); background-blend-mode: var(--cx-mode); box-shadow: inset 0 0 0 1px rgba(255,255,255,.28), inset 0 2px 0 rgba(255,255,255,.18), 0 16px 26px -18px rgba(0,0,0,.95); }
.cx-case.cx-cs_toploader { padding: 7%; }
.cx-case.cx-cs_toploader::after, .cx-case.cx-cs_onetouch::after, .cx-case.cx-cs_slab::after {
  content: ''; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none;
  background: linear-gradient(118deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.07) 38%, rgba(255,255,255,0) 50%);
}
.cx-case.cx-cs_onetouch { aspect-ratio: auto; padding: 9%; border-radius: 7%; background: var(--cx-fill); background-blend-mode: var(--cx-mode); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3), inset 0 0 0 5px rgba(0,0,0,.5), inset 0 0 0 6px rgba(255,255,255,.12), 0 22px 30px -20px rgba(0,0,0,1); }
.cx-case.cx-cs_slab { aspect-ratio: auto; padding: 0 6% 7%; border-radius: 12px; background: var(--cx-fill); background-blend-mode: var(--cx-mode); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3), inset 0 0 0 4px rgba(255,255,255,.05), 0 22px 30px -20px rgba(0,0,0,1); }
.cx-slab-label { position: relative; z-index: 2; display: grid; gap: 1px; margin: 6% 0 5%; padding: 7px 10px; border-radius: 6px; background: var(--tex-fiber), #F4F3EF; color: #141418; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); container-type: inline-size; }
.cx-slab-label b { font-stretch: 80%; font-weight: 850; font-size: clamp(11px, 8cqw, 14px); line-height: 1.1; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-slab-label span { font-size: clamp(10px, 6.4cqw, 12px); font-weight: 650; color: #46464E; }

/* ══ card backs (.cback.cx-cb_*, WP6's <CardBack skin>) ═══════════════════════════════════════════ */
:is(.cback[class*="cx-cb_"], [class*="cx-cb_"] > .cback):not(.cx-cb_classic)::before {
  background: var(--glitter), repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.07) 0 .5cqw, rgba(255,255,255,0) .5cqw 2.4cqw), var(--cx-fill);
  background-blend-mode: overlay, normal, var(--cx-mode);
}
.cback.cx-cb_gold { background: var(--gold); }
.cback.cx-cb_onyx { background: linear-gradient(150deg, #6A6A7A, #1A1A20 40%, #5A5A68 62%, #101014); }
.cback.cx-cb_newsprint { background: var(--tex-fiber), var(--m-paper); box-shadow: 0 14px 26px -14px rgba(0,0,0,.9), inset 0 0 0 1px rgba(0,0,0,.18); }
.cback.cx-cb_crimson { background: var(--metal-crimson); }
.cback.cx-cb_lime { background: var(--metal-lime); }
:is(.cback.cx-cb_newsprint, .cback.cx-cb_pearl, .cback.cx-cb_lime, .cback.cx-cb_gold, .cback.cx-cb_prism) span { color: #16161C; text-shadow: none; }
:is(.cback.cx-cb_newsprint, .cback.cx-cb_pearl, .cback.cx-cb_lime, .cback.cx-cb_gold, .cback.cx-cb_prism)::after { background: repeating-conic-gradient(from 0deg, rgba(20,20,40,.2) 0deg 1.4deg, rgba(20,20,40,0) 1.4deg 4.5deg); }
.cback.cx-cb_marathon::after { background: repeating-conic-gradient(from -1deg, rgba(255,255,255,.7) 0deg 2deg, rgba(255,255,255,0) 2deg 12deg); }
.cback.cx-cb_marathon span::after { content: '30'; position: absolute; left: 0; right: 0; top: 60%; text-align: center; font-size: 13cqw; font-style: italic; font-stretch: 75%; font-weight: 900; color: #FFFFFF; }
.cback[class*="cx-cb_set_"] span { font-size: 15cqw; }
:is(.cback.cx-cb_ice, .cback[class*="cx-cb_set_"]) span { text-shadow: 0 2px 0 rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.55); }

/* ══ pack foils (.pack3.cx-ps_*, WP6's <Pack skin>; the free blue pack only) ═══════════════════════ */
:is(.pack3[class*="cx-ps_"], [class*="cx-ps_"] > .pack3):not(.cx-ps_classic) .pk-face { background: var(--glitter), var(--cx-fill); background-blend-mode: overlay, var(--cx-mode); }
:is(.pack3.cx-ps_graphite, .cx-ps_graphite > .pack3) { --seal: linear-gradient(90deg, #D2D5E0, #6A6F82 45%, #F1F2F7 60%, #6A6F82); --ink: #0E0F14; }
:is(.pack3.cx-ps_newsprint, .cx-ps_newsprint > .pack3) { --seal: linear-gradient(90deg, #2A2A2E, #0E0E10 50%, #3A3A40); --ink: #111114; }
:is(.pack3.cx-ps_lime, .cx-ps_lime > .pack3) { --seal: linear-gradient(90deg, #EEF6B0, #8FA02A 45%, #F6FBD2 60%, #8FA02A); --ink: #1A2004; }
:is(.pack3.cx-ps_crimson, .cx-ps_crimson > .pack3) { --seal: linear-gradient(90deg, #FF8A70, #86170A 45%, #FFD2C8 60%, #86170A); --ink: #fff; }
:is(.pack3.cx-ps_ice, .cx-ps_ice > .pack3) { --seal: linear-gradient(90deg, #E6D4FF, #5718B8 45%, #C9A2FF 60%, #5718B8); --ink: #fff; }
:is(.pack3.cx-ps_sunburst, .cx-ps_sunburst > .pack3) { --seal: linear-gradient(90deg, #FFD9C9, #B42A05 45%, #FFA07A 60%, #B42A05); --ink: #fff; }
:is(.pack3.cx-ps_prism, .cx-ps_prism > .pack3) { --seal: linear-gradient(90deg, #FFFFFF, #C4B0FF 30%, #FFE29A 55%, #9AD8FF 80%, #FFFFFF); --ink: #10121C; }
:is(.pack3.cx-ps_newsprint, .cx-ps_newsprint > .pack3, .pack3.cx-ps_lime, .cx-ps_lime > .pack3, .pack3.cx-ps_prism, .cx-ps_prism > .pack3) .pk-brand { text-shadow: none; }
:is(.pack3.cx-ps_newsprint, .cx-ps_newsprint > .pack3) .pk-art.mosaic > div { mix-blend-mode: multiply; }

/* ══ for the shop (WP3): the material ground of a tile, the rarity bar, the tier frame ═════════════ */
.cx-ground {
  position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none;
  background: linear-gradient(180deg, rgba(11,11,13,0) 50%, rgba(11,11,13,.92)), var(--cx-fill, linear-gradient(var(--panel-2), var(--panel-2)));
  background-blend-mode: normal, var(--cx-mode, normal);
}
/* frames, names and titles are drawn in the material itself: their ground steps back so the item stays readable */
.cx-ground:is([data-slot="frame"], [data-slot="pack_skin"], [data-slot="card_back"]) {
  background: linear-gradient(180deg, rgba(11,11,13,.5), rgba(11,11,13,.62) 50%, rgba(11,11,13,.92)), var(--cx-fill, linear-gradient(var(--panel-2), var(--panel-2)));
  background-blend-mode: normal, var(--cx-mode, normal);
}
.cx-ground:is([data-slot="name_style"], [data-slot="title"]) {
  background: linear-gradient(180deg, rgba(11,11,13,.62), rgba(11,11,13,.62) 50%, rgba(11,11,13,.94)), var(--cx-fill, linear-gradient(var(--panel-2), var(--panel-2)));
  background-blend-mode: normal, var(--cx-mode, normal);
}
.cx-ground[data-slot="title"]:not([data-family]) { --cx-fill: var(--pr-halftone), var(--tex-fiber), linear-gradient(150deg, #3A3934, #1E1D1A); --cx-mode: overlay, overlay, normal; }
.cx-rbar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--p-r0); pointer-events: none; }
.cx-rbar[data-r="1"] { background: var(--p-r1); } .cx-rbar[data-r="2"] { background: var(--p-r2); } .cx-rbar[data-r="3"] { background: var(--p-r3); }
.cx-rbar[data-r="4"] { background: var(--p-r4); } .cx-rbar[data-r="5"] { background: linear-gradient(90deg, #3A4CFF, #9AA5FF 30%, #FFFFFF 50%, #FFC2B3 70%, #FF4A2B); }
.cx-frame {
  position: absolute; inset: 0; border-radius: inherit; padding: 7px; pointer-events: none;
  background: var(--tex-steel), var(--metal-0); background-blend-mode: overlay, normal;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.cx-frame[data-r="1"] { background: var(--pr-lines), var(--metal-1); }
.cx-frame[data-r="2"] { background: var(--pr-waves), var(--metal-2); }
.cx-frame[data-r="3"] { background: var(--pr-ice), var(--metal-3); }
.cx-frame[data-r="4"] { background: var(--pr-sun), var(--metal-4); }
.cx-frame[data-r="5"] { background: var(--pr-rings), conic-gradient(from var(--foil, 210deg) at 50% 40%, #FFB3C1, #FFE29A, #FFFBE0, #A8F0D0, #9AD8FF, #C4B0FF, #FFB0E6, #FFB3C1); animation: foil-turn 9s linear infinite; }

/* ══ the foil sweep (spec 2.2): one 20 degree band, 900ms, when an identity opens; L repeats every 8s ══ */
.cx-sweep { position: absolute; inset: 0; z-index: 2; border-radius: inherit; overflow: hidden; pointer-events: none; }
.cx-sweep::after, :is(.cx-sweep-on) :is(.who-ring, .who-plate, .pf-banner-fx)::after {
  content: ''; position: absolute; inset: -10%; pointer-events: none;
  background: linear-gradient(110deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.7) 50%, rgba(255,255,255,0) 60%);
  transform: translateX(-130%); animation: cx-sweep 900ms var(--p-ease-in-out) 240ms both;
}
.cx-sweep.loop::after, .cx-sweep-loop :is(.who-ring, .who-plate, .pf-banner-fx)::after { animation: cx-sweep-loop 8s var(--p-ease-in-out) 240ms infinite; }
.cx-sweep-on :is(.who-name.cx-ns_gold, .who-name.cx-ns_crimson, .who-name.cx-ns_pearl)::after { animation: cx-band 900ms var(--p-ease-in-out) 240ms both; }
@keyframes cx-sweep { from { transform: translateX(-130%); } to { transform: translateX(130%); } }
@keyframes cx-sweep-loop { 0% { transform: translateX(-130%); } 11%, 100% { transform: translateX(130%); } }
@keyframes cx-band { from { background-position: 100% 0, 0 0, 0 0; } to { background-position: 0 0, 0 0, 0 0; } }

/* reduced motion: no sweep, no shimmer, no turning foil, no fade */
@media (prefers-reduced-motion: reduce) {
  .cx-sweep::after, .cx-sweep-on :is(.who-ring, .who-plate, .pf-banner-fx)::after { display: none; }
  .cx-sweep-on .who-name::after, .pf-banner-fx, .cx-frame { animation: none !important; }
  .who-av[data-tilt] .who-ring::before { display: none; }
  .hovercard { transition: opacity 120ms ease; transform: none !important; }
}