/* ═══════════════════════════════════════════════════════════
   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.
   ═══════════════════════════════════════════════════════════ */
.pk {
  --ink: #F5F7FA; --ink-2: rgba(245, 247, 250, 0.74); --ink-3: rgba(245, 247, 250, 0.52); --ink-4: rgba(245, 247, 250, 0.34);
  --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;
  position: relative; overflow: hidden; width: 1200px; height: 675px;
  color: var(--ink); background: #0A0E17;
  font-family: var(--f-body); font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision;
}
.pk--portrait { width: 1080px; height: 1350px; }
.pk--story { width: 1080px; height: 1920px; }
.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-label { font-family: var(--f-mono); font-weight: 500; font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.pk-pos { color: var(--pos); } .pk-neg { color: var(--neg); }

/* Names — fallback (no Kick name found) dimmed + tagged with its site */
.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; }
.pk-tag { font-style: normal; font-family: var(--f-mono); font-weight: 700; font-size: 0.48em; letter-spacing: 0.12em; text-transform: uppercase;
  margin-left: 0.6em; padding: 0.18em 0.45em; border: 1px solid currentColor; border-radius: 4px; vertical-align: 0.28em; }

/* 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: 40px; line-height: 1; }
.pk-brand-mark.pk-logo { height: 44px; }
.pk-chip { font-family: var(--f-mono); font-weight: 700; font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--acc);
  border: 1px solid rgba(var(--acc-rgb), 0.5); border-radius: 8px; padding: 6px 10px; white-space: nowrap; }
.pk-chip-alert { color: #FF6B6B; border-color: rgba(255, 107, 107, 0.55); }
.pk-date { font-family: var(--f-mono); font-size: 15px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2);
  border: 1px solid var(--line-2); border-radius: 999px; padding: 8px 16px; background: rgba(255, 255, 255, 0.04); white-space: nowrap; }
.pk--portrait .pk-brand-mark.pk-wm { font-size: 44px; } .pk--story .pk-brand-mark.pk-wm { font-size: 52px; }
.pk--portrait .pk-chip, .pk--story .pk-chip { font-size: 15px; padding: 7px 12px; }
.pk--portrait .pk-date { font-size: 17px; padding: 10px 18px; } .pk--story .pk-date { font-size: 19px; padding: 11px 20px; }

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

/* Promo: code block, perks, QR — 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: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-3); }
.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: 8px; font-size: 14px; color: var(--ink-2); white-space: nowrap; }
.pk-code-on .pk-logo { height: 18px; } .pk-code-on .pk-wm { font-size: 15px; }
.pk-perks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s1); min-width: 0; }
.pk-perks li { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 500; line-height: 1.25; color: var(--ink); min-width: 0; }
.pk-perks li > span { min-width: 0; }
.pk-perks--grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s3); row-gap: var(--s1); }
.pk-qr { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: none; }
.pk-qr-svg { display: block; width: 96px; height: 96px; border-radius: 8px; background: #FFF; }
.pk-qr-cap { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.pk-promo { display: flex; align-items: center; gap: var(--s4); padding: var(--s2) 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 .pk-perks { flex: 1; }

/* Footer: links + legal */
.pk-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-width: 0; flex: none; font-family: var(--f-mono); }
.pk-links { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.pk-link { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; font-weight: 700; font-size: 18px; color: var(--ink); }
.pk-link-kick .pk-logo { height: 20px; } .pk-link-kick .pk-wm { font-size: 24px; }
.pk-link-site { color: var(--ink-2); }
.pk-legal { font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.pk--story .pk-link { font-size: 22px; } .pk--story .pk-link-kick .pk-logo { height: 24px; } .pk--story .pk-legal { font-size: 14px; }

/* Lists */
.pk-more { font-family: var(--f-mono); font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.pk-more[hidden] { display: none; }
.pk-spark { display: block; width: 100%; height: 100%; overflow: visible; }