/* ═══════════════════════════════════════════════════════════
   Promo card design system (shared by every variant in js/promo-variants/).
   Deep navy base, ONE accent (--acc), subtle grain, 8px spacing grid.
   Display + money: Bebas Neue (tabular digits). Body: Space Grotesk.
   Labels / receipts: JetBrains Mono.
   Cards are read on phones (~375px wide): no text is ever smaller than --min
   (26px on 1200×675, 28px on the tall sizes). Relative sizes are written as
   max(var(--min), …) so they can't fall under it either.
   ═══════════════════════════════════════════════════════════ */
.pk {
  --ink: #F5F7FA; --ink-2: rgba(245, 247, 250, 0.74); --ink-3: rgba(245, 247, 250, 0.56); --ink-4: rgba(245, 247, 250, 0.38);
  --line: rgba(255, 255, 255, 0.1); --line-2: rgba(255, 255, 255, 0.16);
  --panel: rgba(255, 255, 255, 0.045); --panel-2: rgba(255, 255, 255, 0.075);
  --pos: #3FE283; --neg: #FF5D64; --gold: #F5C542; --silver: #C9D2DE; --bronze: #D98B52;
  --f-display: 'Bebas Neue', 'Anton', Impact, sans-serif;
  --f-body: 'Space Grotesk', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 40px; --s6: 48px; --s8: 64px;
  --min: 26px;    /* the smallest text on the card */
  --t-body: 26px; /* perk lines, links, list rows */
  --t-lead: 28px; /* the leaderboard headline */
  position: relative; overflow: hidden; width: 1200px; height: 675px;
  color: var(--ink); background: #0A0E17;
  font-family: var(--f-body); font-size: var(--min); font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision;
}
.pk--portrait { width: 1080px; height: 1350px; --min: 28px; --t-body: 28px; --t-lead: 34px; }
.pk--story { width: 1080px; height: 1920px; --min: 28px; --t-body: 30px; --t-lead: 38px; }
.pk *, .pk *::before, .pk *::after { box-sizing: border-box; }

/* Background: navy gradient + one accent glow + grain */
.pk-bg { position: absolute; inset: 0; background:
  radial-gradient(110% 75% at 0% 0%, rgba(var(--acc-rgb), 0.16), transparent 56%),
  radial-gradient(80% 60% at 100% 100%, rgba(var(--acc-rgb), 0.07), transparent 62%),
  linear-gradient(165deg, #0A0E17 0%, #111827 100%); }
.pk-grain { position: absolute; inset: 0; pointer-events: none; opacity: 0.09; mix-blend-mode: overlay;
  background-size: 240px 240px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.pk-inner { position: absolute; inset: 0; display: flex; flex-direction: column; min-width: 0; }

/* Type */
.pk-display { font-family: var(--f-display); font-weight: 400; letter-spacing: 0.01em; line-height: 0.92; }
.pk-money { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pk-cents { font-size: max(var(--min), 0.62em); }
.pk-label { font-family: var(--f-mono); font-weight: 500; font-size: var(--min); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.pk-pos { color: var(--pos); } .pk-neg { color: var(--neg); }

/* Names — a fallback name (no Kick name found) is dimmed */
.pk-name { display: inline-block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; min-width: 0; }
.pk-fb { opacity: 0.62; }

/* Logos: real files, or a plain text wordmark when a file is missing */
.pk-logo { display: inline-block; height: 1em; width: auto; vertical-align: middle; }
.pk-wm { font-weight: 700; white-space: nowrap; }
.pk-wm-streamer { font-family: var(--f-display); font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; }
.pk-wm-kick { font-family: var(--f-display); font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: #53FC18; }
.pk-light .pk-logo-stake, .pk-on-acc.pk-acc-light .pk-logo-stake, .pk-acc-light .pk-on-acc .pk-logo-stake { filter: brightness(0); } /* white wordmark → black on light surfaces */

/* Header */
.pk-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); min-width: 0; flex: none; }
.pk-brand { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.pk-brand-mark.pk-wm { font-size: 44px; line-height: 1; }
.pk-brand-mark.pk-logo { height: 44px; }
.pk-chip { font-family: var(--f-mono); font-weight: 700; font-size: var(--min); line-height: 1.2; letter-spacing: 0.12em; text-transform: uppercase; color: var(--acc);
  border: 1px solid rgba(var(--acc-rgb), 0.5); border-radius: 8px; padding: 3px 12px; white-space: nowrap; }
.pk--portrait .pk-brand-mark.pk-wm { font-size: 52px; } .pk--portrait .pk-brand-mark.pk-logo { height: 52px; }
.pk--story .pk-brand-mark.pk-wm { font-size: 60px; } .pk--story .pk-brand-mark.pk-logo { height: 60px; }

/* Icons */
.pk-ico { display: inline-grid; place-items: center; flex: none; width: 1.2em; height: 1.2em; color: var(--acc); font-style: normal; }
.pk-ico svg { width: 100%; height: 100%; display: block; }

/* Promo: the code block and the perks — variants size these per format */
.pk-code { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: none; }
.pk-code-lbl { font-family: var(--f-mono); font-weight: 500; font-size: var(--min); line-height: 1.2; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.pk-code-val { display: block; font-family: var(--f-display); font-size: 52px; line-height: 0.95; letter-spacing: 0.05em; color: var(--acc); white-space: nowrap; }
.pk-code-on { display: flex; align-items: center; gap: 10px; font-size: var(--min); line-height: 1.2; color: var(--ink-2); white-space: nowrap; }
.pk-code-on .pk-logo { height: 1em; } .pk-code-on .pk-wm { font-size: var(--min); }
/* The leaderboard perk is one unit: headline + its breakdown, dimmer */
.pk-perk-main { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.pk-perk-main .pk-ico { font-size: var(--t-lead); margin-top: 0.02em; }
.pk-perk-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pk-perk-txt b { font-size: var(--t-lead); font-weight: 700; line-height: 1.2; color: var(--ink); }
.pk-perk-txt span { font-size: var(--t-body); font-weight: 400; line-height: 1.25; color: var(--ink-3); }
.pk-perk-more { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pk-perk-more li { display: flex; align-items: flex-start; gap: 12px; font-size: var(--t-body); font-weight: 400; line-height: 1.25; color: var(--ink-2); min-width: 0; }
.pk-perk-more li > span { min-width: 0; }
.pk-perk-more .pk-ico { font-size: var(--t-body); margin-top: 0.04em; }

/* Promo band (Classic, Podium): the code on the left; the leaderboard, then
   cashback + VIP raffles under a rule (tall sizes: under both, full width). */
.pk-promo { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--s4); row-gap: 10px;
  padding: 14px var(--s3); border-radius: 16px; min-width: 0; flex: none;
  background: linear-gradient(115deg, rgba(var(--acc-rgb), 0.16), rgba(255, 255, 255, 0.03) 62%); border: 1px solid rgba(var(--acc-rgb), 0.38); }
.pk-promo--nocode { grid-template-columns: minmax(0, 1fr); }
.pk-promo--nolb.pk-promo--solo { grid-template-columns: auto; justify-content: start; }
.pk-promo:not(.pk-promo--solo):not(.pk-promo--nolb):not(.pk-promo--nocode) .pk-code { grid-row: 1 / 3; }
.pk-promo:not(.pk-promo--nolb) .pk-perk-more { grid-column: -2; padding-top: 10px; border-top: 1px solid rgba(var(--acc-rgb), 0.24); }
/* 16:9: "on Stake" sits beside the code */
.pk--x .pk-promo .pk-code { display: grid; grid-template-columns: auto auto; align-items: end; column-gap: 12px; row-gap: 2px; }
.pk--x .pk-promo .pk-code-lbl { grid-column: 1 / -1; }
.pk--x .pk-promo .pk-code-on { padding-bottom: 4px; }
.pk--portrait .pk-promo, .pk--story .pk-promo { column-gap: var(--s5); row-gap: 14px; padding: 22px var(--s4); }
.pk--portrait .pk-promo .pk-code-val { font-size: 72px; } .pk--story .pk-promo .pk-code-val { font-size: 84px; }
.pk--portrait .pk-promo .pk-perk-more, .pk--story .pk-promo .pk-perk-more { gap: 8px; }
.pk--portrait .pk-promo:not(.pk-promo--solo):not(.pk-promo--nolb):not(.pk-promo--nocode) .pk-code, .pk--story .pk-promo:not(.pk-promo--solo):not(.pk-promo--nolb):not(.pk-promo--nocode) .pk-code { grid-row: auto; }
.pk--portrait .pk-promo:not(.pk-promo--nolb) .pk-perk-more, .pk--story .pk-promo:not(.pk-promo--nolb) .pk-perk-more { grid-column: 1 / -1; padding-top: 14px; }

/* Footer: links + legal (wraps to a second row when it doesn't fit one) */
.pk-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px var(--s3); min-width: 0; flex: none; font-family: var(--f-mono); }
.pk-links { display: flex; align-items: center; flex-wrap: wrap; gap: 6px var(--s3); min-width: 0; }
.pk-link { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; font-weight: 700; font-size: var(--min); line-height: 1.2; color: var(--ink); }
.pk-link-kick .pk-logo { height: 0.85em; } .pk-link-kick .pk-wm { font-size: calc(var(--min) * 1.2); }
.pk-link-site { color: var(--ink-2); }
.pk-legal { font-size: var(--min); line-height: 1.2; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }

/* Lists */
.pk-more { font-family: var(--f-mono); font-size: var(--min); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.pk-more[hidden] { display: none; }