/* belka i nagłówek */
.cp-topbar{border-bottom:1px solid var(--cp-line-2);background:rgba(8,9,10,.9)}
.cp-topbar__in{display:flex;justify-content:space-between;gap:16px;align-items:center;min-height:34px;font-family:var(--cp-font-head);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cp-text-mute)}
.cp-topbar__path{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-header{position:sticky;top:0;z-index:20;border-bottom:1px solid var(--cp-line-2);background:rgba(8,9,10,.94);backdrop-filter:blur(8px)}
.cp-header__in{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:18px;padding-bottom:18px}
.cp-logo{display:flex;flex-direction:column;gap:2px;color:var(--cp-text)}
.cp-logo__name{display:block;font-family:var(--cp-font-head);font-weight:600;font-size:21px;line-height:1.15;letter-spacing:.16em;text-transform:uppercase}
.cp-logo__tag{display:block;font-family:var(--cp-font-head);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--cp-text-mute)}
.cp-skip{position:fixed;top:-9999px;left:16px;z-index:50;padding:12px 18px;background:var(--cp-panel);border:1px solid var(--cp-accent);color:var(--cp-text);font-family:var(--cp-font-head);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.cp-skip:focus{top:16px}
.cp-nav{display:flex;align-items:center;gap:20px}
.cp-nav .menu{display:flex;align-items:center;gap:20px}
.cp-nav .menu a{font-family:var(--cp-font-head);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--cp-text-dim);white-space:nowrap}
.cp-nav .menu a:hover,.cp-nav .menu .current-menu-item>a,.cp-nav .menu .current-menu-ancestor>a{color:var(--cp-text-2)}
/* Bieżąca pozycja menu: nie tylko jaśniejszy szary (WCAG 1.4.1) — akcentowe podkreślenie. */
.cp-nav .menu .current-menu-item>a,.cp-nav .menu .current-menu-ancestor>a{text-decoration:underline;text-decoration-color:var(--cp-accent);text-underline-offset:6px;text-decoration-thickness:2px}
.cp-nav .menu li{position:relative}
.cp-nav .menu .sub-menu{display:none;position:absolute;top:100%;right:0;padding-top:12px;z-index:40;min-width:260px}
/* .is-dismissed: podmenu zamknięte klawiszem Esc (nav.js, WCAG 1.4.13) — do czasu, aż wskaźnik i fokus opuszczą pozycję. */
.cp-nav .menu li:hover:not(.is-dismissed)>.sub-menu,.cp-nav .menu li:focus-within:not(.is-dismissed)>.sub-menu{display:block}
.cp-nav .menu .sub-menu li{border:1px solid var(--cp-line-3);border-top:0;background:var(--cp-panel)}
.cp-nav .menu .sub-menu li:first-child{border-top:1px solid var(--cp-line-3)}
.cp-nav .menu .sub-menu a{display:block;padding:13px 16px;text-transform:none;letter-spacing:.06em;color:var(--cp-text-2)}
.cp-nav .menu .sub-menu a:hover{background:var(--cp-accent-tint);color:var(--cp-accent)}
.cp-search{position:relative}
.cp-search input{width:190px;border:1px solid var(--cp-line-input);background:var(--cp-panel);padding:7px 11px;font-family:var(--cp-font-head);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
/* Fokus pola wyszukiwania: pełna obwódka jak wszędzie (base.css :focus-visible) + akcentowa ramka — dawne `outline:0` zostawiało tylko półprzezroczystą ramkę (słabo widoczną). */
.cp-search input:focus{border-color:var(--cp-accent);outline:2px solid var(--cp-accent);outline-offset:2px}
.cp-suggest{position:absolute;right:0;top:calc(100% + 8px);z-index:45;width:min(360px,90vw);border:1px solid var(--cp-line-3);background:var(--cp-panel);max-height:70vh;overflow:auto}
/* Opcje listy to <li role="option"> bez linku w środku (search.js) — wybór klikiem albo strzałkami i Enterem z pola. */
.cp-suggest [role=option]{display:grid;grid-template-columns:36px 1fr;column-gap:12px;align-items:center;padding:8px 12px;color:var(--cp-text);border-bottom:1px solid var(--cp-line-1);cursor:pointer}
.cp-suggest [role=option]:hover,.cp-suggest [role=option].is-active{background:var(--cp-accent-tint);color:var(--cp-accent)}
.cp-suggest img{grid-row:1/3}.cp-suggest small{font-family:var(--cp-font-head);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--cp-text-mute)}
@media (max-width:1024px){.cp-suggest{position:static;width:100%}}
.cp-burger{display:none;width:40px;height:40px;border:1px solid var(--cp-line-3);align-items:center;justify-content:center;color:var(--cp-text-2)}
@media (max-width:1024px){
  .cp-burger{display:inline-flex}
  .cp-nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--cp-panel);border-bottom:1px solid var(--cp-line-3);padding:12px var(--cp-gutter) 20px}
  .cp-nav.is-open{display:block}
  .cp-nav .menu{flex-direction:column;align-items:stretch;gap:0}
  .cp-nav .menu a{display:block;padding:14px 0;font-size:14px;border-bottom:1px solid var(--cp-line-1)}
  .cp-nav .menu .sub-menu{display:block;position:static;padding:0 0 0 16px;min-width:0}
  .cp-nav .menu .sub-menu li{border:0;background:none}
  .cp-search input{width:100%;margin-top:12px;padding:12px;font-size:13px}
}
/* Zastrzeżenie „nieoficjalny projekt fanowski” zostaje w belce także na telefonie (audyt zasad fanowskich F6): ≤1024px
   znika tylko dopowiedzenie, a ustępuje ścieżka (wielokropek) — nota nigdy się nie zawija ani nie kurczy. */
.cp-topbar__path{min-width:0}.cp-topbar__note{flex:none;white-space:nowrap}
@media (max-width:1024px){.cp-topbar__note-more{display:none}}
@media (max-width:640px){.cp-logo__tag{display:none}}
/* wzorce */
/* Nagłówek strony — wspólny dla katalogu i treści redakcyjnych (był w catalog.css, ale
   używają go też szablony stron, które nie ładują arkusza katalogu). */
.cp-pagehead{margin-bottom:32px}.cp-pagehead .cp-lead,.cp-pagehead .cp-prose{margin-top:14px}.cp-pagehead .cp-stats{margin-top:24px}
.cp-section-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-bottom:12px;margin:48px 0 20px;border-bottom:1px solid var(--cp-line-2)}
.cp-section-head h2{font-size:15px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.cp-section-head a{font-family:var(--cp-font-head);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
/* Panel i callout obsługują też odpowiedniki z prozy (blok details i cytat) — bez kopiowania
   wartości do prose.css; tamten arkusz dokłada już tylko marginesy i typografię. */
.cp-panel,.cp-prose details{border:1px solid var(--cp-line-2);background:var(--cp-panel)}
.cp-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border:1px solid var(--cp-line-4);font-family:var(--cp-font-head);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--cp-text-2)}
.cp-btn:hover{border-color:var(--cp-accent-line);color:var(--cp-accent)}
.cp-btn--primary{background:var(--cp-accent);border-color:var(--cp-accent);color:var(--cp-on-accent)}
.cp-btn--primary:hover{background:var(--cp-accent-hover);color:var(--cp-on-accent)}
.cp-chip{display:inline-flex;align-items:center;min-height:30px;padding:4px 10px;border:1px solid var(--cp-line-3);font-family:var(--cp-font-head);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--cp-text-2)}
.cp-chip:hover{border-color:var(--cp-accent-line);color:var(--cp-accent)}
/* Stan „wciśnięty” pełnym wypełnieniem (jak bieżąca zakładka) — sam odcień tekstu to za mało (WCAG 1.4.1 / 1.4.11). */
.cp-chip[aria-pressed="true"]{background:var(--cp-accent);border-color:var(--cp-accent);color:var(--cp-on-accent)}
.cp-chip[aria-pressed="true"]:hover{background:var(--cp-accent-hover);border-color:var(--cp-accent-hover);color:var(--cp-on-accent)}
@media (forced-colors:active){.cp-chip[aria-pressed="true"]{forced-color-adjust:none;background:SelectedItem;color:SelectedItemText;border-color:SelectedItem}}
/* Etykieta typu karty (LEGEND/UNIT/PROGRAM/GEAR) jak na kartach i w oficjalnym Gameplay Guide: kontur w kolorze,
   ścięty prawy górny róg. Kontur rysuje tło elementu, wnętrze — ::before (clip-path obcina też filter/border,
   więc obrys nie może być ani borderem, ani drop-shadow na tym samym elemencie). Czysty tekst — czytelny dla robotów. */
.cp-badge{--cp-notch:7px;position:relative;isolation:isolate;display:inline-block;padding:4px 11px 4px 9px;background:var(--cp-ink);color:var(--cp-ink);font-family:var(--cp-font-head);font-size:10px;font-weight:700;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;clip-path:polygon(0 0,calc(100% - var(--cp-notch)) 0,100% var(--cp-notch),100% 100%,0 100%)}
.cp-badge::before{content:"";position:absolute;inset:1px;z-index:-1;background:var(--cp-bg);clip-path:polygon(0 0,calc(100% - var(--cp-notch) + .6px) 0,100% calc(var(--cp-notch) - .6px),100% 100%,0 100%)}
.cp-badge--type{--cp-ink:var(--cp-kw-yellow);--cp-notch:.55em;padding:.34em .9em .3em .72em;font-size:.82em;letter-spacing:.12em}
a.cp-badge:hover{color:var(--cp-ink);filter:brightness(1.2)}
/* Triggery i keywordy — geometria z oficjalnych ikon kart (viewBox 8 j. wysokości): TRIGGER ma boki wypukłe
   (wypustka .94 j. od 1,9 do 7,1 j.), KEYWORD — boki wklęsłe (wcięcie .94 j. między pasami 1,2 j.).
   Jednostki w em, więc kształt skaluje się z tekstem. Kolory i czarny napis jak na kartach. */
.cp-kw{--u:.17em;--b:.22em;display:inline-block;padding:.2em .55em .16em;margin:0 .12em;font-family:var(--cp-font-head);font-weight:700;font-size:.82em;line-height:1.15;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;vertical-align:.06em;color:var(--cp-on-kw);background:var(--cp-kw-yellow)}
.cp-kw:hover{color:var(--cp-on-kw);filter:brightness(1.1)}
.cp-kw--trigger{clip-path:polygon(var(--u) 0,calc(100% - var(--u)) 0,calc(100% - var(--u)) var(--u),100% calc(2*var(--u)),100% calc(100% - 2*var(--u)),calc(100% - var(--u)) calc(100% - var(--u)),calc(100% - var(--u)) 100%,var(--u) 100%,var(--u) calc(100% - var(--u)),0 calc(100% - 2*var(--u)),0 calc(2*var(--u)),var(--u) var(--u))}
.cp-kw--keyword{clip-path:polygon(0 0,100% 0,100% var(--b),calc(100% - var(--u)) calc(var(--b) + var(--u)),calc(100% - var(--u)) calc(100% - var(--b) - var(--u)),100% calc(100% - var(--b)),100% 100%,0 100%,0 calc(100% - var(--b)),var(--u) calc(100% - var(--b) - var(--u)),var(--u) calc(var(--b) + var(--u)),0 var(--b))}
.cp-kw[data-tone="green"]{background:var(--cp-kw-green)}.cp-kw[data-tone="red"]{background:var(--cp-kw-red)}.cp-kw[data-tone="pink"]{background:var(--cp-kw-pink)}
.cp-callout,.cp-prose blockquote{border-left:2px solid var(--cp-accent);background:var(--cp-accent-tint);padding:16px 18px}
.cp-callout--warn{border-left-color:var(--cp-yellow);background:rgba(217,180,74,.06)}
.cp-stats{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border:1px solid var(--cp-line-2);background:var(--cp-panel)}
.cp-stats>div{padding:16px 18px;border-right:1px solid var(--cp-line-2)}.cp-stats>div:last-child{border-right:0}
.cp-stats b{display:block;font-family:var(--cp-font-head);font-size:26px;font-weight:600;color:var(--cp-text-hi);font-variant-numeric:tabular-nums}
.cp-stats span{font-family:var(--cp-font-head);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--cp-text-mute)}
.cp-crumbs{font-family:var(--cp-font-head);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--cp-text-mute);margin-bottom:24px}
/* Linki w tekście nie mogą różnić się samym kolorem (WCAG 1.4.1): akcent vs tekst obok to 1,1–1,9:1 — stąd podkreślenie. */
.cp-crumbs a{text-decoration:underline;text-decoration-color:var(--cp-accent-line);text-underline-offset:3px}.cp-crumbs a:hover{text-decoration-color:currentColor}
.cp-crumbs li{display:inline}.cp-crumbs li+li::before{content:"/";margin:0 8px;color:var(--cp-text-dim)}
/* stopka */
.cp-footer{border-top:1px solid var(--cp-line-2);background:var(--cp-footer);margin-top:24px}
.cp-footer__grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:40px;padding-top:48px;padding-bottom:40px}
.cp-footer h2{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--cp-text-mute);margin-bottom:14px}
.cp-footer li{margin-bottom:8px}.cp-footer li a{color:var(--cp-text-2);font-size:14px}
.cp-footer__note{font-size:13px;color:var(--cp-text-mute);max-width:44ch}
.cp-footer__bar{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:16px;padding-bottom:24px;border-top:1px solid var(--cp-line-1);font-family:var(--cp-font-head);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--cp-text-dim)}
@media (max-width:1024px){.cp-footer__grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.cp-footer__grid{grid-template-columns:1fr}.cp-stats{grid-auto-flow:row}.cp-stats>div{border-right:0;border-bottom:1px solid var(--cp-line-2)}}