/* Card component styles. Canvas: 690 x 940 px = 69 x 94 mm (10 px per mm), trim 30 px in,
   safe area 60 px in. Type sizes in px: 1 pt = 3.528 px (9 pt = 31.8 px, 6.5 pt = 22.9 px).
   Earlier rounds' styles live in output/cards/web1/src/ and output/cards/web2/src/. */

/* OFL, shipped with the component */
@font-face { font-family: Archivo; src: url(fonts/Archivo.woff2); font-weight: 100 900; font-stretch: 62% 125%; }
@font-face { font-family: Archivo; src: url(fonts/Archivo-Italic.woff2); font-weight: 100 900; font-stretch: 62% 125%; font-style: italic; }
@font-face { font-family: Saira; src: url(fonts/Saira.woff2); font-weight: 100 900; font-stretch: 50% 125%; }
@font-face { font-family: JetBrains; src: url(fonts/JetBrainsMono.woff2); font-weight: 100 800; }
/* The founder's installed fonts, symlinked, never committed; commercial or personal-use licences (see fonts-licensed/README.txt) */
@font-face { font-family: 'Vault Alarm'; src: url(fonts-licensed/VaultAlarm-Sharp.otf); }
@font-face { font-family: 'PP Supply Sans'; src: url(fonts-licensed/PPSupplySans-Medium.otf); font-weight: 500; }
@font-face { font-family: 'PP Supply Sans'; src: url(fonts-licensed/PPSupplySans-Bold.otf); font-weight: 700; }
@font-face { font-family: 'PP Supply Mono'; src: url(fonts-licensed/PPSupplyMono-Medium.otf); font-weight: 500; }
@font-face { font-family: 'PP Supply Mono'; src: url(fonts-licensed/PPSupplyMono-Bold.otf); font-weight: 700; }
@font-face { font-family: 'Lemon Milk'; src: url(fonts-licensed/Lemon-Milk-2.otf); font-weight: 700; }
@font-face { font-family: 'PP Neue Montreal'; src: url(fonts-licensed/PPNeueMontreal-Book.otf); font-weight: 400; }
@font-face { font-family: 'PP Neue Montreal'; src: url(fonts-licensed/PPNeueMontreal-Medium.otf); font-weight: 500; }
@font-face { font-family: 'PP Neue Montreal'; src: url(fonts-licensed/PPNeueMontreal-Bold.otf); font-weight: 700; }
@font-face { font-family: 'PP Neue Montreal'; src: url(fonts-licensed/PPNeueMontreal-BoldItalic.otf); font-weight: 700; font-style: italic; }
@font-face { font-family: 'Frontage Condensed'; src: url(fonts-licensed/FrontageCondensed-Regular.ttf); }
@font-face { font-family: 'Bauhaus Nano'; src: url(fonts-licensed/BauhausNanoDisplay-Medium.otf); }

/* ---------- host ---------- */
pack-card { display: block; position: relative; aspect-ratio: 63 / 88; overflow: hidden; border-radius: 5.1% / 3.65%; }
pack-card[bleed] { aspect-ratio: 69 / 94; border-radius: 0; }
.pc {
  position: absolute; left: -30px; top: -30px; width: 690px; height: 940px; overflow: hidden;
  font-family: Archivo, sans-serif; color: #151417; -webkit-font-smoothing: antialiased; font-synthesis: none;
  --navy: #10131A; --white: #FFFFFF;
  --chrome: url(tex/chrome.webp); --brushed: url(tex/brushed.webp);
  --accent-img: var(--brushed); --accent-ink: #151417;   /* rarity/parallel foil for accents */
  --par-img: none;                                        /* parallel field */
}
pack-card[bleed] .pc { left: 0; top: 0; }
.pc *, .pc *::before, .pc *::after { box-sizing: border-box; margin: 0; padding: 0; min-width: 0; }
.pc > * { position: absolute; }
.pc img { position: absolute; display: block; max-width: none; }
.pc .win, .pc .cut { position: absolute; overflow: hidden; }
.pc .cut { pointer-events: none; }
.pc i { font-style: normal; }
.pc .abbr { display: none; }
.pc .meter { display: none; }
.pc [data-fit] { display: block; white-space: nowrap; overflow: hidden; }
.pc p[data-fit] { white-space: normal; }
.pc .pow { display: flex; flex-direction: column; }
.pc .pow-t { flex: 1 1 0; min-height: 0; }
.pc .pow-n, .pc .pow-tag { flex: none; }
.pc .sub { display: flex; align-items: center; white-space: nowrap; }
.pc .sub > * { flex: none; }
.pc .sub .job { flex: 0 1 auto; }
.pc .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin: 0 10px; opacity: 0.7; }
.pc .pips { display: inline-flex; gap: 4px; margin-right: 6px; vertical-align: 0.12em; }
.pc .pips i { width: 9px; height: 9px; background: currentColor; transform: rotate(45deg); }

/* series colour families: field colour, a deep shade for tabs, the ink that reads on the field, a light tint */
.s-garage { --c: #F26A1B; --c-deep: #3A1606; --c-ink: #151417; --c-soft: #FFB27A; }
.s-gamer  { --c: #6B4DFF; --c-deep: #170E47; --c-ink: #FFFFFF; --c-soft: #BCAEFF; }
.s-main   { --c: #FF5FA2; --c-deep: #45102B; --c-ink: #151417; --c-soft: #FFB9D6; }

/* rarity finish on base prints (schema: rare rainbow holo, super rare oil-slick) */
.pc.r-rare.f-base { --accent-img: url(tex/holo.webp); }
.pc.r-super_rare.f-base { --accent-img: url(tex/oilslick.webp); --accent-ink: #FFFFFF; }
/* parallels swap materials on the same structure */
.pc.f-silver { --accent-img: url(tex/silver.webp); --par-img: url(tex/silver.webp); --accent-ink: #151417; }
.pc.f-green  { --accent-img: url(tex/green.webp);  --par-img: url(tex/green.webp);  --accent-ink: #FFFFFF; }
.pc.f-gold   { --accent-img: url(tex/goldswirl.webp); --par-img: url(tex/goldswirl.webp); --accent-ink: #151417; }
/* on a foil field, text on the field reads in the foil's ink */
.pc.f-silver, .pc.f-gold { --field-ink: #151417; }
.pc.f-green { --field-ink: #FFFFFF; }

/* ---------- font pairings ---------- */
/* A: Archivo heavy italic condensed + Archivo */
.font-a .name, .font-a .ovr-n, .font-a .stat-v, .font-a .pow-n { font-family: Archivo; font-style: italic; font-weight: 900; font-stretch: 80%; }
.font-a .stat-l, .font-a .ovr-l, .font-a .pow-tag, .font-a .series, .font-a .rar, .font-a .job { font-family: Archivo; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; }
.font-a .pow-t, .font-a .breed { font-family: Archivo; font-weight: 500; }
.font-a .setno { font-family: JetBrains; font-weight: 700; }
/* B: Vault Alarm Sharp + PP Supply Mono labels + PP Supply Sans text */
.font-b .name, .font-b .ovr-n, .font-b .stat-v, .font-b .pow-n { font-family: 'Vault Alarm'; font-weight: 400; text-transform: uppercase; }
.font-b .stat-l, .font-b .ovr-l, .font-b .pow-tag, .font-b .series, .font-b .rar, .font-b .job, .font-b .setno { font-family: 'PP Supply Mono'; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }
.font-b .pow-t, .font-b .breed { font-family: 'PP Supply Sans'; font-weight: 500; }
/* C: Lemon Milk + PP Neue Montreal */
.font-c .name, .font-c .ovr-n, .font-c .stat-v, .font-c .pow-n { font-family: 'Lemon Milk'; font-weight: 700; text-transform: uppercase; }
.font-c .stat-l, .font-c .ovr-l, .font-c .pow-tag, .font-c .series, .font-c .rar, .font-c .job { font-family: 'PP Neue Montreal'; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.font-c .pow-t, .font-c .breed { font-family: 'PP Neue Montreal'; font-weight: 500; }
.font-c .setno { font-family: 'PP Neue Montreal'; font-weight: 700; letter-spacing: 0.04em; }

/* ---------- shared pieces ---------- */
/* the three-colour strip the founder liked: series colour, navy, white */
.pc .bug { display: flex; height: 42px; transform: skewX(-12deg); box-shadow: 0 4px 12px rgba(0,0,0,.3); z-index: 2; }
.pc .bug > * { display: flex; align-items: center; padding: 0 12px; font-size: 19px; line-height: 1; white-space: nowrap; }
.pc .bug .series { background: var(--c); color: var(--c-ink); }
.pc .bug .setno { background: var(--navy); color: #fff; }
.pc .bug .rar { background: #fff; color: var(--navy); }
.pc .serial {
  font-family: JetBrains; font-weight: 800; font-size: 20px; letter-spacing: 0.04em; color: #fff !important; padding: 2px 10px; border-radius: 0;
  border: 3px solid transparent; background: linear-gradient(#0c0c0e, #0c0c0e) padding-box, var(--accent-img) center / cover border-box !important;
}
/* segmented stat meter: --v of 8 filled */
.pc .meter { --on: var(--navy); --off: rgba(0,0,0,.15); --gap: 4px;
  background: linear-gradient(90deg, var(--on) calc(var(--v) * 12.5%), var(--off) 0);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 calc(12.5% - var(--gap)), transparent 0 12.5%);
  mask: repeating-linear-gradient(90deg, #000 0 calc(12.5% - var(--gap)), transparent 0 12.5%); }
/* keyline behind a shaped window; foil on rare, super rare and parallels */
.pc .keyline { background: var(--navy); }
.r-rare .keyline, .r-super_rare .keyline, .f-silver .keyline, .f-green .keyline, .f-gold .keyline { background: var(--accent-img) center / cover; }
.pc .chrome-fill { background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.08) 46%, rgba(0,0,0,.1) 54%, rgba(255,255,255,.3)), var(--brushed) center / cover; }
/* window shapes */
.pc .diecut { clip-path: polygon(0 0, calc(100% - 90px) 0, 100% 90px, 100% 100%, 90px 100%, 0 calc(100% - 90px)); }

/* ================= e05: prizm spokes, die-cut with break-out, overlapping rating ================= */
.e05 .field, .e17 .field { inset: 0; }
.e05 .pat, .e17 .pat { inset: 0; display: none; }
.bg-prizm .field { background: url(tex/prizmdark.webp) center / cover; }
.bg-chrome .field { background: linear-gradient(180deg, rgba(255,255,255,.15), rgba(0,0,0,.12)), var(--chrome) center / cover; }
.bg-colour .field { background: var(--c); }
.bg-colour .pat { display: block; background: url(tex/contour.webp) center / cover; filter: invert(1); mix-blend-mode: screen; opacity: .3; }
.bg-deep .field { background: var(--c-deep); }
.e05.f-silver .field, .e05.f-green .field, .e05.f-gold .field, .e17.f-silver .field, .e17.f-green .field, .e17.f-gold .field { background: var(--par-img) center / cover; }
.e05.f-silver .pat, .e05.f-green .pat, .e05.f-gold .pat, .e17.f-silver .pat, .e17.f-green .pat, .e17.f-gold .pat { display: none; }
/* on a series-colour field the colour pieces turn navy and the stats read in the field's ink */
.bg-colour.e05 .keyline, .bg-colour.e17 .keyline { background: var(--navy); }
.bg-colour.e05 .tab, .bg-colour.e17 .tab { background: var(--navy); }
.bg-colour.e05 .tab .name, .bg-colour.e05 .tab .job, .bg-colour.e17 .tab .name, .bg-colour.e17 .tab .job { color: #fff; }
.bg-colour.e05 .stat-l, .bg-colour.e05 .stat-v { background: none; color: var(--c-ink); }
.bg-colour.e05 .meter { --on: var(--c-ink); --off: color-mix(in srgb, var(--c-ink) 22%, transparent); }
.e05 .diecut { clip-path: polygon(110px 0, 100% 0, 100% calc(100% - 90px), calc(100% - 90px) 100%, 0 100%, 0 110px); }
.e05 .keyline { background: var(--c); }
.r-rare.e05 .keyline, .r-super_rare.e05 .keyline, .f-silver.e05 .keyline, .f-green.e05 .keyline, .f-gold.e05 .keyline { background: var(--accent-img) center / cover; }
.e05 .ovr { left: 60px; top: 60px; width: 128px; height: 150px; z-index: 3; display: flex; flex-direction: column; align-items: center; padding-top: 18px;
  background: var(--accent-img) center / cover; clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%); }
.e05 .ovr-n { font-size: 64px; line-height: 1; color: var(--accent-ink); }
.e05 .ovr-l { font-size: 19px; color: var(--accent-ink); margin-top: 4px; }
.e05 .bug { right: 60px; top: 70px; }
.e05 .tab { left: 220px; right: 0; top: 528px; height: 86px; background: var(--c); clip-path: polygon(30px 0, 100% 0, 100% 100%, 0 100%); padding: 12px 60px 0 50px; z-index: 2; }
.e05 .name { font-size: 40px; line-height: 1.1; color: var(--c-ink); }
.e05 .job { font-size: 19px; color: var(--c-ink); margin-top: 2px; }
.e05 .stats { left: 60px; right: 60px; top: 630px; display: flex; flex-direction: column; gap: 4px; }
.e05 .stat { display: grid; grid-template-columns: 150px 1fr 54px; align-items: center; gap: 14px; height: 29px; }
.e05 .stat-l { font-size: 19px; color: #fff; background: rgba(0,0,0,.6); padding: 1px 6px; justify-self: start; }
.e05 .meter { display: block; height: 16px; --on: var(--c); --off: rgba(255,255,255,.2); }
.e05 .stat-v { order: 3; font-size: 32px; line-height: 1; text-align: right; color: #fff; background: rgba(0,0,0,.6); padding: 1px 4px; }
.e05 .pow { left: 60px; right: 60px; top: 770px; bottom: 60px; background: #fff; padding: 12px 18px 8px; }
.e05 .pow-tag { position: absolute; right: 16px; top: -14px; font-size: 18px; background: var(--c); color: var(--c-ink); padding: 2px 10px; }
.e05 .pow-n { font-size: 24px; line-height: 1.15; color: var(--navy); }
.e05 .pow-t { font-size: 23px; line-height: 1.15; color: var(--navy); margin-top: 2px; }
.e05 .pow.is-flavour .pow-t { font-style: italic; }

/* ================= e06: liquid chrome field, slanted photo ================= */
.e06 .field { inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.15), rgba(0,0,0,.12)), var(--chrome) center / cover; }
.e06.f-silver .field, .e06.f-green .field, .e06.f-gold .field { background: var(--par-img) center / cover; }
.e06 .slant { clip-path: polygon(0 50px, 100% 0, 100% calc(100% - 50px), 0 100%); }
.e06 .bug { left: 66px; top: 60px; }
.e06 .ovr { right: 40px; top: 40px; width: 156px; height: 156px; border-radius: 50%; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(circle, #fff 60%, transparent 61%), var(--accent-img) center / cover; box-shadow: 0 8px 18px rgba(0,0,0,.45); }
.s-garage.r-common.e06 .ovr, .r-uncommon.e06 .ovr { background: radial-gradient(circle, #fff 60%, var(--navy) 61%); }
.e06 .ovr-n { font-size: 62px; line-height: 0.9; color: var(--navy); }
.e06 .ovr-l { font-size: 18px; color: var(--navy); }
.e06 .tab { left: 0; right: 0; top: 516px; height: 92px; background: var(--navy); clip-path: polygon(0 0, 100% 0, calc(100% - 26px) 100%, 0 100%); padding: 10px 70px 0 60px; z-index: 2; }
.e06 .name { font-size: 50px; line-height: 1.1; color: #fff; }
.e06 .job { font-size: 18px; color: var(--c-soft); }
.e06 .plate { left: 60px; right: 60px; top: 616px; height: 148px; background: var(--navy); padding: 10px 18px; box-shadow: 0 6px 14px rgba(0,0,0,.3); }
.e06 .stats { display: flex; flex-direction: column; gap: 2px; }
.e06 .stat { display: grid; grid-template-columns: 150px 1fr 56px; align-items: center; gap: 14px; height: 30px; }
.e06 .stat-l { font-size: 20px; color: #fff; }
.e06 .meter { display: block; height: 14px; --on: var(--c); --off: rgba(255,255,255,.18); --gap: 3px; }
.e06 .stat-v { order: 3; font-size: 40px; line-height: 1; text-align: right; color: #fff; }
.e06 .pow { left: 60px; right: 60px; top: 776px; bottom: 50px; background: var(--c); padding: 10px 18px; }
.e06 .pow::before { content: ''; position: absolute; inset: 0; background: url(tex/grit.webp) center / cover; filter: invert(1); mix-blend-mode: screen; opacity: .35; }
.e06 .pow > * { position: relative; }
.e06 .pow-tag { position: absolute; right: 14px; top: 10px; font-size: 18px; background: var(--navy); color: #fff; padding: 2px 8px; }
.e06 .pow-n { font-size: 32px; line-height: 1.05; color: var(--c-ink); padding-right: 110px; }
.e06 .pow-t { font-size: 23px; line-height: 1.15; color: var(--c-ink); margin-top: 2px; }
.e06 .pow.is-flavour .pow-t { font-style: italic; }

/* ================= e10: bar chart over the photo ================= */
.e10 .shade { inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,0) 18%, rgba(0,0,0,0) 40%, rgba(10,12,18,.75) 58%, rgba(10,12,18,.92)); }
.e10 .ovr { left: 40px; top: 40px; width: 136px; height: 172px; background: var(--navy); clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%); display: flex; flex-direction: column; align-items: center; padding-top: 30px; }
.e10 .ovr::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 12px; background: var(--c); }
.r-rare.e10 .ovr::before, .r-super_rare.e10 .ovr::before, .f-silver.e10 .ovr::before, .f-green.e10 .ovr::before, .f-gold.e10 .ovr::before { background: var(--accent-img) center / cover; }
.e10 .ovr-n { font-size: 60px; line-height: 1; color: #fff; }
.e10 .ovr-l { font-size: 19px; color: #fff; margin-top: 6px; }
.e10 .tab { left: 250px; right: 0; top: 70px; height: 92px; background: var(--navy); clip-path: polygon(30px 0, 100% 0, 100% 100%, 0 100%); padding: 14px 60px 0 50px; }
.e10 .name { font-size: 30px; line-height: 1.15; color: #fff; }
.e10 .job { font-size: 19px; color: var(--c-soft); margin-top: 4px; }
.e10 .meta { left: 60px; top: 470px; display: flex; gap: 8px; }
.e10 .meta > * { font-size: 18px; color: #fff; background: rgba(10,12,18,.8); padding: 3px 8px; }
.e10 .meta .series { background: var(--c); color: var(--c-ink); }
.e10 .stats { left: 0; right: 60px; top: 512px; display: flex; flex-direction: column; gap: 8px; }
.e10 .stat { position: relative; height: 54px; display: flex; align-items: center; padding-left: 60px; }
.e10 .stat::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: calc(130px + var(--v) * 54px); background: var(--c); clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%); }
.f-silver.e10 .stat::before, .f-green.e10 .stat::before, .f-gold.e10 .stat::before { background: var(--par-img) center / cover; }
.e10 .stat .full { display: none; } .e10 .stat .abbr { display: inline; }
.e10 .stat-l { position: relative; font-size: 20px; color: var(--field-ink, var(--c-ink)); }
.e10 .stat-v { position: absolute; left: calc(146px + var(--v) * 54px); font-size: 40px; line-height: 1; color: #fff; }
.e10 .pow { left: 60px; right: 60px; top: 770px; bottom: 60px; background: #fff; padding: 10px 18px; }
.e10 .pow-tag { position: absolute; right: 16px; top: -14px; font-size: 18px; background: var(--c); color: var(--c-ink); padding: 2px 10px; }
.e10 .pow-n { font-size: 24px; line-height: 1.15; color: var(--navy); }
.e10 .pow-t { font-size: 23px; line-height: 1.15; color: var(--navy); margin-top: 2px; }
.e10 .pow.is-flavour .pow-t { font-style: italic; }

/* ================= e12: illustrated corners on the photo ================= */
.e12 .wash { inset: 0; background: linear-gradient(180deg, transparent 56%, color-mix(in srgb, var(--c) 85%, transparent) 68%, var(--c) 76%); }
.f-silver.e12 .wash, .f-green.e12 .wash, .f-gold.e12 .wash { background: none; }
.f-silver.e12 .pat, .f-green.e12 .pat, .f-gold.e12 .pat { inset: 640px 0 0 0; background: var(--par-img) center / cover; filter: none; mix-blend-mode: normal; opacity: 1; -webkit-mask: linear-gradient(transparent, #000 40px); mask: linear-gradient(transparent, #000 40px); }
.e12 .pat { inset: 0; background: url(tex/swirl.webp) center / cover; filter: invert(1); mix-blend-mode: screen; opacity: .3; -webkit-mask: linear-gradient(transparent 66%, #000 78%); mask: linear-gradient(transparent 66%, #000 78%); }
.e12 .tl-shade { inset: 0; background: radial-gradient(circle at 0 0, rgba(0,0,0,.88) 18%, rgba(0,0,0,0) 38%); }
.e12 .ovr { left: 60px; top: 50px; display: flex; flex-direction: column; align-items: flex-start; }
.e12 .ovr-n { font-size: 96px; line-height: 1; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.4); }
.e12 .ovr-l { font-size: 19px; color: #fff; }
.e12 .tab { left: 290px; right: 0; top: 64px; height: 92px; background: var(--c-deep); clip-path: polygon(30px 0, 100% 0, 100% 100%, 0 100%); padding: 12px 60px 0 50px; }
.e12 .name { font-size: 32px; line-height: 1.15; color: #fff; }
.e12 .job { font-size: 19px; color: #fff; opacity: .85; margin-top: 4px; }
.e12 .pow { left: 0; width: 370px; top: 712px; bottom: 0; background: var(--c-deep); clip-path: polygon(0 0, calc(100% - 36px) 0, 100% 36px, 100% 100%, 0 100%); padding: 14px 26px 60px 60px; }
.e12 .pow-tag { position: absolute; left: 60px; top: -16px; font-size: 18px; background: var(--c); color: var(--c-ink); padding: 2px 10px; }
.e12 .pow { overflow: visible; clip-path: none; }
.e12 .pow::before { content: ''; position: absolute; inset: 0; background: var(--c-deep); clip-path: polygon(0 0, calc(100% - 36px) 0, 100% 36px, 100% 100%, 0 100%); }
.e12 .pow > * { position: relative; }
.e12 .pow-n { font-size: 22px; line-height: 1.15; color: #fff; }
.e12 .pow-t { font-size: 23px; line-height: 1.12; color: #fff; margin-top: 2px; }
.e12 .pow.is-flavour .pow-t { font-style: italic; }
.e12 .stats { left: 392px; right: 60px; top: 688px; gap: 2px; display: flex; flex-direction: column; gap: 8px; }
.e12 .stat { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 12px; align-items: end; column-gap: 8px; }
.e12 .stat .full { display: none; } .e12 .stat .abbr { display: inline; }
.e12 .stat-l { font-size: 19px; color: var(--field-ink, var(--c-ink)); align-self: center; }
.e12 .stat-v { font-size: 32px; line-height: 1; color: var(--field-ink, var(--c-ink)); }
.e12 .meter { display: block; grid-column: 1 / 3; height: 10px; --on: var(--field-ink, var(--c-ink)); --off: color-mix(in srgb, var(--field-ink, var(--c-ink)) 22%, transparent); --gap: 3px; }
.e12 .meta { right: 60px; top: 166px; display: flex; gap: 10px; background: var(--c-deep); color: #fff; padding: 4px 12px; }
.e12 .meta > * { font-size: 18px; }
.e12 .meta .series { color: var(--c-soft); }

/* ================= e17: hybrid, design 5's frame with design 10's light bottom ================= */
.e17 .keyline { background: var(--c); }
.r-rare.e17 .keyline, .r-super_rare.e17 .keyline, .f-silver.e17 .keyline, .f-green.e17 .keyline, .f-gold.e17 .keyline { background: var(--accent-img) center / cover; }
.e17 .wshade { position: absolute; background: linear-gradient(180deg, rgba(10,12,18,0) 42%, rgba(10,12,18,.8) 64%, rgba(10,12,18,.92)); }
.e17 .ovr { left: 60px; top: 60px; width: 128px; height: 150px; z-index: 3; display: flex; flex-direction: column; align-items: center; padding-top: 18px;
  background: var(--accent-img) center / cover; clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%); }
.e17 .ovr-n { font-size: 64px; line-height: 1; color: var(--accent-ink); }
.e17 .ovr-l { font-size: 19px; color: var(--accent-ink); margin-top: 4px; }
.e17 .bug { right: 60px; top: 70px; }
.e17 .bug .serial { position: absolute; right: 0; top: 50px; }
.e17 .bug .rar, .e05 .bug .rar { font-size: 0; padding: 0 12px; }
.e17 .bug .rar .pips, .e05 .bug .rar .pips { margin: 0; }
/* on dark or busy foils the pennant keeps a foil rim and a navy centre so the number stays readable */
.f-green.e17 .ovr::before, .f-gold.e17 .ovr::before, .r-super_rare.f-base.e17 .ovr::before,
.f-green.e05 .ovr::before, .f-gold.e05 .ovr::before, .r-super_rare.f-base.e05 .ovr::before {
  content: ''; position: absolute; inset: 8px 8px 10px; background: var(--navy); clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%); }
.f-green.e17 .ovr > *, .f-gold.e17 .ovr > *, .r-super_rare.f-base.e17 .ovr > *,
.f-green.e05 .ovr > *, .f-gold.e05 .ovr > *, .r-super_rare.f-base.e05 .ovr > * { position: relative; color: #fff; }
.e17 .tab { left: 230px; right: 0; top: 464px; height: 86px; background: var(--c); clip-path: polygon(30px 0, 100% 0, 100% 100%, 0 100%); padding: 12px 60px 0 50px; z-index: 2; }
.e17 .name { font-size: 40px; line-height: 1.1; color: var(--c-ink); }
.e17 .job { font-size: 19px; color: var(--c-ink); margin-top: 2px; }
.e17 .stats { left: 0; right: 60px; top: 566px; display: flex; flex-direction: column; gap: 8px; }
.e17 .stat { position: relative; height: 42px; display: flex; align-items: center; padding-left: 60px; }
.e17 .stat::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: calc(130px + var(--v) * 50px); background: var(--c); clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%); }
.e17 .stat .full { display: none; } .e17 .stat .abbr { display: inline; }
.e17 .stat-l { position: relative; font-size: 19px; color: var(--c-ink); }
.e17 .stat-v { position: absolute; left: calc(140px + var(--v) * 50px); font-size: 34px; line-height: 1; color: #fff; background: var(--navy); padding: 4px 8px 3px; }
.e17 .pow { left: 60px; right: 60px; top: 782px; bottom: 60px; background: #fff; padding: 10px 18px 8px; }
.e17 .pow-tag { position: absolute; right: 16px; top: -14px; font-size: 18px; background: var(--c); color: var(--c-ink); padding: 2px 10px; }
.e17 .pow-n { font-size: 22px; line-height: 1.15; color: var(--navy); }
.e17 .pow-t { font-size: 23px; line-height: 1.13; color: var(--navy); margin-top: 2px; }
.e17 .pow.is-flavour .pow-t { font-style: italic; }

/* ================= backs: blue stock, the PULLDOG logo filled in code ================= */
/* no rainbow or spectrum fields on the back (founder, 17 Oct 2026) */
.is-back .art { inset: 0; background: var(--art) center / cover; }
.field-cobalt { --art: url(tex/back5-cobalt.webp); } .field-tooth { --art: url(tex/back5-tooth.webp); }
.pc .logo { display: block; flex: none; width: var(--lw, 500px); aspect-ratio: 3800 / 920; background: var(--logo-fill, #fff);
  -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }
/* blue matte back: chrome rows, bright chrome focal row */
.is-back .reps { left: -400px; right: -400px; top: -70px; bottom: -70px; display: flex; flex-direction: column; justify-content: center; gap: 26px; }
.is-back .row { display: flex; justify-content: center; gap: 44px; }
.is-back .reps.is-brick .row:nth-child(odd) { transform: translateX(272px); }
.is-back .reps.is-brick .row.is-mid { transform: none; }
.is-back .reps .logo { --logo-fill: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,0) 50%), url(tex/chrome.webp) center / 100% 900%; opacity: .3; }
.is-back .reps .is-focal .logo, .is-back .is-focal-logo.is-chrome { --logo-fill: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.4) 50%, rgba(255,255,255,.65)), url(tex/chrome.webp) center / 100% 900%; opacity: 1; filter: drop-shadow(0 6px 10px rgba(0,8,30,.45)); }
/* toothy paper back: big overlapping logos, tone on tone; overlaps darken */
.is-back .scatter { inset: 0; }
.is-back .scatter .logo { position: absolute; --logo-fill: rgb(10,28,80); opacity: .16; mix-blend-mode: multiply; transform-origin: 50% 50%; }
.field-tooth .scatter .logo { opacity: .13; }
.is-back .is-focal-logo { position: absolute; }
/* the band runs bleed to bleed so trim drift never shows paper at its ends */
.is-back .band { left: 0; right: 0; background: url(tex/back5-cobalt.webp) center / cover; box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 8px 24px rgba(0,8,30,.35); }
.is-back .is-focal-logo.is-navy { --logo-fill: #0B1638; filter: drop-shadow(0 0 14px rgba(215,230,255,.85)) drop-shadow(0 1.5px 0 rgba(255,255,255,.6)); }

/* ================= prize cards: a prize as a card ================= */
/* --win is the site's prize colour; Saira is the site's display voice (the instant-win card's) */
pack-card { container-type: inline-size; }
.is-prize { --win: #FFD23F; }
.is-prize .disp { font-family: Saira, Archivo, sans-serif; font-weight: 900; font-stretch: 125%; font-style: oblique 12deg; text-transform: uppercase; letter-spacing: -0.02em; line-height: .92; }
.is-prize .lbl, .is-prize .series { font-weight: 800; font-size: 19px; line-height: 1.15; text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; }
.is-prize .caption { font-weight: 700; font-size: 19px; line-height: 1.2; letter-spacing: .02em; }
.is-prize .pname { flex: none; font-weight: 800; font-size: 30px; line-height: 1.12; letter-spacing: -0.005em; }
.is-prize .val[data-fit] { display: flex; align-items: flex-start; overflow: visible; line-height: 1; font-family: Saira, Archivo, sans-serif; font-weight: 900; font-stretch: 125%; font-style: oblique 12deg; letter-spacing: -0.03em; }
.is-prize .cur, .is-prize .cts { font-size: .4em; line-height: 1; margin-top: .08em; letter-spacing: 0; }
.is-prize .cur { margin-right: .08em; }
.is-prize .cts { margin-left: .04em; }
.is-prize .num { font-weight: inherit; }
.is-prize .dot { width: 5px; height: 5px; margin: 0 9px; }
.is-prize .prod { pointer-events: none; filter: drop-shadow(0 16px 18px rgba(0,8,30,.35)); }
.is-prize .sub { flex-wrap: wrap; white-space: normal; row-gap: 4px; }
/* the bonus pack (the site's Wrapper): cobalt stock, darker crimped ends, a sheen and a little holo; the toothy winner card behind */
.is-prize .pack { transform: rotate(-6deg); filter: drop-shadow(0 14px 16px rgba(0,8,30,.4));
  background: linear-gradient(180deg, rgba(0,0,0,.25) 0 9%, transparent 9% 91%, rgba(0,0,0,.25) 91%), linear-gradient(105deg, transparent 30%, rgba(255,255,255,.28) 45%, transparent 60%), url(tex/back5-cobalt.webp) center / cover;
  clip-path: polygon(0 2%, 5% 0, 10% 2%, 15% 0, 20% 2%, 25% 0, 30% 2%, 35% 0, 40% 2%, 45% 0, 50% 2%, 55% 0, 60% 2%, 65% 0, 70% 2%, 75% 0, 80% 2%, 85% 0, 90% 2%, 95% 0, 100% 2%,
    100% 98%, 95% 100%, 90% 98%, 85% 100%, 80% 98%, 75% 100%, 70% 98%, 65% 100%, 60% 98%, 55% 100%, 50% 98%, 45% 100%, 40% 98%, 35% 100%, 30% 98%, 25% 100%, 20% 98%, 15% 100%, 10% 98%, 5% 100%, 0 98%); }
.is-prize .pack-sheen { position: absolute; inset: 0; background: url(tex/holo.webp) center / cover; mix-blend-mode: overlay; opacity: .3; }
.is-prize .pack .logo { position: absolute; --logo-fill: #fff; }
.is-prize .bcard { background: url(tex/back5-tooth.webp) center / cover; border-radius: 6% / 4.3%; transform: rotate(9deg); box-shadow: 0 10px 18px rgba(0,8,30,.35), inset 0 0 0 3px rgba(255,255,255,.5); }

/* z02 giant value behind the prize */
.z02 .field { inset: 0; background: var(--c); }
.z02 .pat { inset: 0; background: url(tex/contour.webp) center / cover; filter: invert(1); mix-blend-mode: screen; opacity: .28; }
.z02 > .logo { --logo-fill: var(--c-ink); }
.z02 .chip { right: 60px; top: 64px; background: var(--navy); padding: 9px 14px; transform: skewX(-12deg); }
.z02 .chip .lbl { color: var(--win); display: block; transform: skewX(12deg); }
.z02 .giant { left: 60px; right: 60px; top: 124px; height: 250px; display: flex; align-items: center; justify-content: center; color: var(--c-ink); }
.z02 .giant .val { font-size: 230px; justify-content: safe center; width: 100%; }
.z02 .nbar { left: 0; right: 0; top: 724px; height: 92px; padding: 0 60px; display: flex; align-items: center; box-shadow: 0 -6px 16px rgba(0,0,0,.2); }
.z02 .nbar .pname { width: 100%; height: 50px; font-size: 40px; line-height: 1.05; font-style: italic; font-weight: 900; font-stretch: 85%; color: var(--navy); display: flex; align-items: center; }
.z02 > .sub { left: 60px; right: 60px; top: 830px; color: var(--c-ink); }

/* design 8's foils on design 2, by kind; the foil attribute picks where: band (under the name) or bg (behind the prize) */
.is-prize { --foil: url(tex/silver.webp); }
.is-prize.k-headline { --foil: url(tex/goldswirl.webp); }
.is-prize.k-bonus { --foil: url(tex/prizmdark.webp); }
.is-prize .foil { display: none; background: var(--foil) center / cover; }
.is-prize.k-bonus .foil::after { content: ''; position: absolute; inset: 0; background: var(--c); mix-blend-mode: color; opacity: .8; }
.foil-band .fband { display: block; left: 0; right: 0; top: 816px; bottom: 0; }
.foil-bg .fwin { display: block; left: 44px; right: 44px; top: 384px; height: 340px; box-shadow: inset 0 0 0 3px rgba(255,255,255,.55); }
/* type on foil sits on a plate */
.foil-band.z02 > .sub { top: 822px; right: auto; max-width: 570px; padding: 4px 10px; row-gap: 2px; background: rgba(12,14,22,.92); color: #fff; }

/* prize lettering: our own type on a navy plate, never the maker's logo artwork */
.is-prize .lt { background: var(--navy); transform: skewX(-12deg); padding: 10px 22px; box-shadow: 0 10px 20px rgba(0,8,30,.35); }
.is-prize .lt span { color: #fff; text-align: center; transform: skewX(12deg); line-height: 1.05; overflow: visible; }
.is-prize .lt.is-hero { left: calc(var(--bx) + 70px); width: calc(var(--bw) - 70px); top: calc(var(--by) + var(--bh) * .28); }
.is-prize .lt.is-hero span { font-size: 150px; }
.is-prize .lt.is-tag { right: calc(690px - var(--bx) - var(--bw) + 10px); max-width: calc(var(--bw) - 20px); top: calc(var(--by) + var(--bh) - 70px); padding: 6px 14px; }
.is-prize .lt.is-tag span { font-size: 44px; color: var(--win); }

/* compact: under 160 css px wide only the prize, the value and the series colour can read, so the rest goes
   and the value grows (90 px is 0.14 css px per canvas px) */
@container (max-width: 160px) {
  .pc.is-prize :is(.pname, .caption, .series, .lt.is-tag) { display: none; }
  .z02 .chip, .z02 .nbar, .z02 > .sub, .z02 > .logo { display: none; }
  .z02 .giant { top: 70px; height: 300px; }
  .z02 .giant .val { font-size: 300px; }
}

/* measurement mode: hide glyph fills; shadows and glows stay, as part of what the glyph sits on (render.py) */
.pc .mhide, .pc .mhide * { color: transparent !important; -webkit-text-fill-color: transparent !important; -webkit-text-stroke: 0 !important; }
.pc .mhide .pips i { background: transparent !important; }
.pc .tl.mhide, .pc .wm.mhide { background: none !important; }
.pc .logo.mhide { visibility: hidden; }