@font-face{font-family:"Chakra Petch";font-weight:500;font-display:swap;src:url(../fonts/chakra-petch-latin-ext-500.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Chakra Petch";font-weight:500;font-display:swap;src:url(../fonts/chakra-petch-latin-500.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Chakra Petch";font-weight:600;font-display:swap;src:url(../fonts/chakra-petch-latin-ext-600.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Chakra Petch";font-weight:600;font-display:swap;src:url(../fonts/chakra-petch-latin-600.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Chakra Petch";font-weight:700;font-display:swap;src:url(../fonts/chakra-petch-latin-ext-700.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Chakra Petch";font-weight:700;font-display:swap;src:url(../fonts/chakra-petch-latin-700.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Karla";font-weight:400 700;font-display:swap;src:url(../fonts/karla-latin-ext-var.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Karla";font-weight:400 700;font-display:swap;src:url(../fonts/karla-latin-var.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --cp-bg:#08090A; --cp-panel:#0D0F11; --cp-footer:#0A0B0C; --cp-placeholder:#111417;
  --cp-accent:#4FB2E8; --cp-accent-hover:#8FD0F2; --cp-on-accent:#07131A; --cp-on-badge:#0A0C0E;
  --cp-text-hi:#F2F4F5; --cp-text:#E6E8EA; --cp-text-2:#C3C8CC; --cp-text-mute:#9BA1A7; --cp-text-dim:#8A9096;
  --cp-red:#D97A6C; --cp-green:#7FBF8C; --cp-yellow:#D9B44A; --cp-blue:#4FB2E8; --cp-pink:#D98AB3;
  /* kolory znaczników z kart (oficjalne ikony PLAY/ATTACK/DEFEATED/QUICK) — tylko dla plakietek .cp-kw/.cp-badge--type */
  --cp-kw-yellow:#FCEE17; --cp-kw-green:#33A94C; --cp-kw-red:#ED1C2A; --cp-kw-pink:#ED3193; --cp-on-kw:#000;
  --cp-line-1:rgba(255,255,255,.05); --cp-line-2:rgba(255,255,255,.08); --cp-line-3:rgba(255,255,255,.12); --cp-line-4:rgba(255,255,255,.16);
  --cp-accent-line:rgba(79,178,232,.5); --cp-accent-tint:rgba(79,178,232,.06);
  /* Obramowanie kontrolek formularza (pole, checkbox, select): ≥ 3:1 względem tła (WCAG 1.4.11) — 3,25:1 na
     --cp-panel, 3,37:1 na --cp-bg. Linie --cp-line-1…4 (1,3–1,6:1) zostają dla ramek dekoracyjnych. */
  --cp-line-input:#5E656C;
  --cp-font-head:"Chakra Petch",ui-monospace,monospace; --cp-font-body:"Karla",system-ui,sans-serif;
  /* --cp-sticky-top: wysokość realnego sticky nagłówka (.cp-header, position:sticky w
     components.css) — zmierzona check.mjs --eval na 768/1280px (79,890625px, zaokrąglone w górę). */
  --cp-container:1240px; --cp-gutter:24px; --cp-sticky-top:80px;
  --cp-ink:var(--cp-accent); --cp-ink-border:rgba(79,178,232,.45);
}
[data-color="red"]{--cp-ink:var(--cp-red);--cp-ink-border:rgba(217,122,108,.45)}
[data-color="green"]{--cp-ink:var(--cp-green);--cp-ink-border:rgba(127,191,140,.45)}
[data-color="yellow"]{--cp-ink:var(--cp-yellow);--cp-ink-border:rgba(217,180,74,.45)}
[data-color="blue"]{--cp-ink:var(--cp-blue);--cp-ink-border:rgba(79,178,232,.45)}
/* Na ≤640px nagłówek jest niższy (bez .cp-logo__tag; belka z notą nie jest sticky) — zmierzona wysokość
   check.mjs --eval przy 375px to 77px; token był 72px (5px za mało), więc sticky elementy (na tej
   szerokości: tylko scroll-padding-top — .cp-filters i .cp-card__art są position:static ≤1024px)
   chowały się częściowo pod nagłówkiem. */
@media (max-width:640px){:root{--cp-gutter:16px;--cp-sticky-top:77px}}