/* MangaPilot — motyw WordPress przeniesiony z AnimePilota (348d264), akcent marki brunat. Zob. PROVENANCE.md.
      Tokeny marki: branding/tokens/tokens.css (źródło prawdy: tokens.json). Nazwy surowych tokenów (--mp-kobalt, --mp-granat) zostały po AnimePilocie; wartości są brunatne.
   Dwa tryby: <html data-theme="dark|light">. Komponenty używają wyłącznie tokenów semantycznych (sekcja 1b).
   Warstwy: 1) tokeny, 2) baza, 3) układ, 4) komponenty, 5) widoki, 6) ruch, 7) warsztat demo. */

@font-face {
  font-family: "Figtree";
  /* Podzbiór: łacina z polskimi znakami, interpunkcja, € i strzałki (23 KB). */
  src: url("../fonts/Figtree-Variable-latin-ext.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

/* 1a. Tokeny marki ----------------------------------------------------------- */

:root {
  --mp-kobalt: #9C2B1E;
  --mp-kobalt-500: #C24A2E;
  --mp-granat: #33100D;
  --mp-lod: #FBF5F2;
  --mp-biel: #FFFFFF;
  --mp-stal: #6E5853;
  --mp-mgla: #B89E98;
  --mp-linia: #EADDD8;
  --mp-linia-ciemna: #5A2A22;
  --mp-granat-powierzchnia: #42170F;
  --mp-link-ciemny: #FFB4A2;
  /* Propozycje rozszerzenia palety dla trybu ciemnego (do dopisania w tokens.json po akceptacji). */
  /* Tryb ciemny: neutralne grafity (propozycja do brandingu). */
  --mp-czern: #0E0E11;
  --mp-grafit-950: #131316;
  --mp-grafit-900: #17171B;
  --mp-grafit-800: #1E1E23;
  --mp-grafit-700: #28282E;
  --mp-mgla-jasna: #A9A9B6;
  --mp-mgla-ciemna: #86868F;

  --mp-zima-tint: #E3F5FF;   --mp-zima: #3DC2FF;   --mp-zima-strong: #0A8BD0;   --mp-zima-text: #075A88;
  --mp-wiosna-tint: #FFEDF4; --mp-wiosna: #FF7EB0; --mp-wiosna-strong: #E0407E; --mp-wiosna-text: #A0154E;
  --mp-lato-tint: #FFF4D6;   --mp-lato: #FFC63A;   --mp-lato-strong: #B67C00;   --mp-lato-text: #7A5100;
  --mp-jesien-tint: #FFECE5; --mp-jesien: #FF6438; --mp-jesien-strong: #DD4318; --mp-jesien-text: #A02D0C;

  --mp-font: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;
  --radius-sm: 10px; --radius-md: 14px; --radius-lg: 18px; --radius-xl: 28px; --radius-pill: 999px;
  --container: 1240px;
  --gutter: 16px;
  --header-h: 64px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --grid-lines: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
}
@media (min-width: 768px) { :root { --gutter: 24px; --header-h: 72px; } }
@media (min-width: 1200px) { :root { --gutter: 32px; } }

/* 1b. Tokeny semantyczne: tryb jasny (domyślny w CSS) ------------------------- */

:root {
  color-scheme: light;
  --bg: var(--mp-biel);
  --bg-alt: var(--mp-lod);
  --surface: var(--mp-biel);
  --surface-2: var(--mp-lod);
  --surface-3: #F3E8E3;
  --border: var(--mp-linia);
  --border-strong: #D9C4BC;
  --text: var(--mp-granat);
  --text-muted: var(--mp-stal);
  --text-subtle: var(--mp-stal);
  --link: var(--mp-kobalt);
  --accent: var(--mp-kobalt);
  --accent-hover: #7E2216;
  --on-accent: var(--mp-biel);
  --focus: var(--mp-kobalt);
  --chip-bg: var(--mp-lod);
  --input-bg: var(--mp-biel);
  --input-border: var(--mp-linia);
  --header-bg: var(--mp-granat);
  --footer-bg: var(--mp-granat);
  --overlay: rgba(51, 16, 13, .55);
  --shadow: 0 1px 2px rgba(51, 16, 13, .06), 0 14px 32px -18px rgba(51, 16, 13, .35);
  --poster-shadow: 0 14px 30px -16px rgba(51, 16, 13, .55);
  --error: #B42318;
  --error-bg: #FDECEA;
  --warning-bg: var(--mp-lato-tint);
  --warning-fg: var(--mp-lato-text);
  --mark-bg: #F6DDD5;
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2333100D' stroke-width='2'%3E%3Cpath d='m5 8 5 5 5-5'/%3E%3C/svg%3E");
  --demo-bg: #FFF8E0; --demo-border: var(--mp-lato-strong); --demo-fg: var(--mp-lato-text);
  /* Sezon bez data-season: neutralny kobalt. */
  --season-fg: var(--mp-kobalt); --season-bg: var(--mp-lod); --season-graphic: var(--mp-kobalt);
}

/* Tryb ciemny: neutralne grafity; kolor wnoszą okładki, kobalt zostaje kolorem akcji. Domyślny jest tryb jasny. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--mp-czern);
  --bg-alt: var(--mp-grafit-950);
  --surface: var(--mp-grafit-900);
  --surface-2: var(--mp-grafit-800);
  --surface-3: var(--mp-grafit-700);
  --border: rgba(255, 255, 255, .08);
  --border-strong: rgba(255, 255, 255, .17);
  --text: var(--mp-biel);
  --text-muted: var(--mp-mgla-jasna);
  --text-subtle: var(--mp-mgla-ciemna);
  --link: var(--mp-link-ciemny);
  --accent: var(--mp-kobalt-500);
  --accent-hover: #D45C3F;
  --focus: var(--mp-link-ciemny);
  --chip-bg: rgba(255, 255, 255, .05);
  --input-bg: var(--mp-grafit-900);
  --input-border: rgba(255, 255, 255, .14);
  --header-bg: rgba(14, 14, 17, .84);
  --footer-bg: #050507;
  --overlay: rgba(20, 6, 5, .78);
  --shadow: 0 20px 40px -24px rgba(0, 0, 0, .8);
  --poster-shadow: 0 18px 40px -18px rgba(0, 0, 0, .9);
  --error: #FF8A80;
  --error-bg: rgba(255, 90, 80, .12);
  --warning-bg: rgba(255, 198, 58, .12);
  --warning-fg: var(--mp-lato);
  --mark-bg: rgba(194, 74, 46, .35);
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23FFFFFF' stroke-width='2'%3E%3Cpath d='m5 8 5 5 5-5'/%3E%3C/svg%3E");
  --demo-bg: rgba(255, 198, 58, .08); --demo-border: rgba(255, 198, 58, .45); --demo-fg: var(--mp-lato);
  --season-fg: var(--mp-link-ciemny); --season-bg: rgba(194, 74, 46, .16); --season-graphic: var(--mp-kobalt-500);
}

/* Pasy zawsze ciemne (nagłówki immersyjne) w obu trybach. */
.on-dark {
  --text: var(--mp-biel); --text-muted: #DCC9C2; --text-subtle: var(--mp-mgla); --link: var(--mp-link-ciemny);
  --border: rgba(255, 255, 255, .16); --border-strong: rgba(255, 255, 255, .34); --surface: rgba(255, 255, 255, .06);
  --chip-bg: rgba(255, 255, 255, .08); --focus: var(--mp-biel); --accent: var(--mp-kobalt-500);
  color: var(--text);
}

/* Sezon: ton dobierany do tła (księga znaku, rozdz. 6). */
[data-season="zima"]   { --s-tint: var(--mp-zima-tint);   --s-base: var(--mp-zima);   --s-strong: var(--mp-zima-strong);   --s-text: var(--mp-zima-text); }
[data-season="wiosna"] { --s-tint: var(--mp-wiosna-tint); --s-base: var(--mp-wiosna); --s-strong: var(--mp-wiosna-strong); --s-text: var(--mp-wiosna-text); }
[data-season="lato"]   { --s-tint: var(--mp-lato-tint);   --s-base: var(--mp-lato);   --s-strong: var(--mp-lato-strong);   --s-text: var(--mp-lato-text); }
[data-season="jesien"] { --s-tint: var(--mp-jesien-tint); --s-base: var(--mp-jesien); --s-strong: var(--mp-jesien-strong); --s-text: var(--mp-jesien-text); }
[data-season] { --season-fg: var(--s-text); --season-bg: var(--s-tint); --season-graphic: var(--s-strong); }
[data-theme="dark"] [data-season], .on-dark[data-season], .on-dark [data-season], [data-season] .on-dark {
  --season-fg: var(--s-base); --season-bg: color-mix(in srgb, var(--s-base) 16%, transparent); --season-graphic: var(--s-base);
}

/* Skrzydło znaku jako znacznik. --blade to promienie rogów ćwiartki koła w orientacji sezonu. */
:root { --blade: 0 100% 0 0; }
[data-season="wiosna"] { --blade: 0 0 100% 0; }
[data-season="lato"] { --blade: 0 0 0 100%; }
[data-season="jesien"] { --blade: 100% 0 0 0; }

/* 2. Baza ------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + var(--space-4)); background: var(--bg); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 1rem/1.625 var(--mp-font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; text-wrap: balance; overflow-wrap: break-word; }
h1 { font-size: clamp(2.125rem, 1.6rem + 2vw, 2.75rem); line-height: 1.14; letter-spacing: -.025em; }
h2 { font-size: clamp(1.625rem, 1.35rem + 1.1vw, 2rem); line-height: 1.19; letter-spacing: -.02em; }
h3 { font-size: clamp(1.3125rem, 1.2rem + .45vw, 1.5rem); line-height: 1.25; letter-spacing: -.015em; }
h4 { font-size: clamp(1.125rem, 1.08rem + .2vw, 1.25rem); line-height: 1.4; letter-spacing: -.01em; font-weight: 600; }
p { margin: 0; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.site-header :focus-visible, .site-footer :focus-visible { outline-color: var(--mp-biel); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .88em; overflow-wrap: anywhere; }
time { font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }
::selection { background: var(--mp-kobalt); color: var(--mp-biel); }
[lang="ja"] { font-family: "Hiragino Sans", "Yu Gothic", "Noto Sans JP", var(--mp-font); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--space-4); top: -100px; z-index: 100;
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm);
  background: var(--mp-biel); color: var(--mp-granat); font-weight: 600;
}
.skip-link:focus { top: var(--space-3); }

.label { font-size: .75rem; line-height: 1.33; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-subtle); }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: .75rem; line-height: 1; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--season-fg); }
.eyebrow::before { content: ""; width: 11px; height: 11px; border-radius: var(--blade); background: currentColor; flex: none; }
.lead { font-size: 1.125rem; line-height: 1.67; }
.muted { color: var(--text-muted); }
.small { font-size: .875rem; line-height: 1.57; }

/* 3. Układ ----------------------------------------------------------------- */

.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: calc(760px + 2 * var(--gutter)); }
.stack > * + * { margin-top: var(--stack, var(--space-4)); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster, var(--space-2)); }
/* Nie „.page”: WordPress dodaje tę klasę do <body> na stronach typu Strona. */
.page-main { padding-block: var(--space-5) var(--space-8); }
.section { padding-block: var(--space-8); }
@media (max-width: 599.98px) { .section { padding-block: 40px; } }
.section--tint { background: var(--bg-alt); }
.section--tight { padding-block: var(--space-6); }
.section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-3) var(--space-5); margin-bottom: var(--space-5); }
.section-head h2 { font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); }
/* Podpis sekcji to jedno krótkie zdanie: bez limitu szerokości, który łamie go na sierotę w drugiej linii. */
.section-head p:not(.eyebrow) { color: var(--text-muted); margin-top: var(--space-2); text-wrap: pretty; }
.section-head__actions { display: flex; align-items: center; gap: var(--space-3); }
.section-head h2 a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 12px; }
.section-head h2 a::after { content: ""; width: 10px; height: 10px; border-top: 2.5px solid currentColor; border-right: 2.5px solid currentColor; rotate: 45deg; translate: -3px 1px; opacity: .55; }
.section-head h2 a:hover { color: var(--link); }
.section-head h2 a:hover::after { opacity: 1; }
.section-foot { display: flex; justify-content: center; margin-top: var(--space-6); }
.more-link {
  display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 16px; white-space: nowrap;
  border: 1.5px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--surface);
  font-size: .9375rem; font-weight: 600; color: var(--link); text-decoration: none; transition: border-color .15s, background-color .15s;
}
.more-link::after { content: ""; width: 7px; height: 7px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; rotate: 45deg; translate: -2px 0; }
.more-link:hover { border-color: var(--link); text-decoration: none; }
.more-link.small { font-size: .875rem; min-height: 36px; padding: 6px 14px; }

.grid { display: grid; gap: var(--space-5) var(--space-4); }
.grid--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .grid--cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grid--cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6) var(--space-5); } }
@media (min-width: 1200px) { .grid--cards-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 1024px) and (max-width: 1199.98px) { .layout-sidebar--left .grid--cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.grid--articles { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .grid--articles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grid--articles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6) var(--space-5); } }

.layout-sidebar { display: grid; gap: var(--space-7); }
@media (max-width: 1023.98px) { .layout-sidebar--left { gap: var(--space-4); } }
.layout-sidebar > *, .article-layout > * { min-width: 0; }
@media (min-width: 1024px) {
  .layout-sidebar { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-8); align-items: start; }
  .layout-sidebar--left { grid-template-columns: 280px minmax(0, 1fr); }
  .sticky { position: sticky; top: calc(var(--header-h) + var(--space-5)); }
}

/* 4. Komponenty ------------------------------------------------------------ */

/* Nagłówek: logo podstawowe białe na granacie; w trybie ciemnym półprzezroczysty z rozmyciem. */
.site-header {
  position: relative; z-index: 50;
  background: var(--header-bg); color: var(--mp-biel);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
}
.site-header a:not(.btn) { color: var(--mp-biel); }
.site-header__bar { display: flex; align-items: center; gap: var(--space-4); min-height: var(--header-h); }
.brand { display: inline-flex; flex: none; padding: 6px 0; }
.brand img { height: 22px; width: auto; }
@media (min-width: 768px) { .brand img { height: 26px; } }

/* Główna nawigacja (components/primary-nav.php). Grupa = link do huba + przycisk ze strzałką otwierający panel. */
.primary-nav ul { list-style: none; margin: 0; padding: 0; }
.primary-nav__list { display: flex; gap: var(--space-1); }
.primary-nav__list > li { display: flex; align-items: center; border-radius: var(--radius-pill); transition: background .15s var(--ease); }
.primary-nav__list > li > a { display: block; padding: 10px 14px; border-radius: var(--radius-pill); font-weight: 600; text-decoration: none; white-space: nowrap; }
.primary-nav__list > li:hover, .primary-nav__item.is-open { background: rgba(255, 255, 255, .08); }
.primary-nav__list > li:has(> a[aria-current="page"]), .primary-nav__list > li.is-active { background: var(--mp-biel); }
.primary-nav__list > li:has(> a[aria-current="page"]) > a, .primary-nav__item.is-active > a, .primary-nav__item.is-active > button { color: var(--mp-granat) !important; }
.primary-nav__item.is-active .primary-nav__link:focus-visible, .primary-nav__item.is-active .primary-nav__toggle:focus-visible { outline-color: var(--mp-kobalt-500); }
.primary-nav__toggle { display: none; }
.js .has-panel > .primary-nav__link { padding-right: 4px; }
.js .primary-nav__toggle {
  display: inline-grid; place-items: center; width: 30px; height: 36px; margin-right: 4px; padding: 0;
  border: 0; border-radius: var(--radius-pill); background: none; color: var(--mp-biel);
}
.primary-nav__toggle svg { width: 16px; height: 16px; transition: rotate .2s var(--ease); }
.primary-nav__toggle[aria-expanded="true"] svg { rotate: 180deg; }
.primary-nav__toggle:focus-visible { outline-offset: -2px; }
@media (min-width: 1024px) and (max-width: 1199.98px) { .primary-nav__list > li > a { padding-inline: 10px; } .js .has-panel > .primary-nav__link { padding-right: 2px; } .js .primary-nav__toggle { margin-right: 2px; } }

/* Panel (megamenu): pozycjonowany absolutnie na szerokość kontenera (bez przesunięć układu), jak panel wyszukiwania
   (ta sama karta, odstęp, animacja); ukryty przez visibility, więc zamknięty nie łapie fokusu.
   Mostek ::before wypełnia przerwę między nagłówkiem a panelem, żeby kursor nie gubił menu.
   Kolumny linków: kolorowa ikona w kafelku (barwy logotypu), tytuł + opis, strzałka przy najechaniu; serwisy jako kafelki z logotypami
   jeden pod drugim, a po prawej pas z trzema okładkami na jasnym tle, dosunięty do krawędzi karty.
   --inset: wcięcie tekstu linków w kolumnie; nagłówek kolumny i link „Wszystkie…” zaczynają się w tym samym miejscu. */
.nav-panel {
  position: absolute; z-index: 60; left: var(--gutter); right: var(--gutter); top: calc(var(--header-h) + 6px);
  display: flex; gap: var(--space-6); padding: 0 0 0 var(--space-6); border-radius: var(--radius-lg);
  background: var(--surface); color: var(--text); border: 1px solid var(--border); box-shadow: var(--shadow);
  visibility: hidden; opacity: 0; translate: 0 -6px;
  transition: opacity .16s var(--ease), translate .16s var(--ease), visibility 0s linear .16s;
}
.nav-panel::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 24px; }
.primary-nav__item.is-open > .nav-panel,
html:not(.js) .has-panel:hover > .nav-panel, html:not(.js) .has-panel:focus-within > .nav-panel { visibility: visible; opacity: 1; translate: 0 0; transition-delay: 0s; }
.site-header .nav-panel :focus-visible { outline-color: var(--focus); outline-offset: 0; }
.nav-panel ul { display: grid; gap: 2px; }
.nav-panel a { display: block; padding: 9px 12px; border-radius: 8px; color: var(--text) !important; font-weight: 600; text-decoration: none; }
.nav-panel a:hover { background: var(--surface-2); }
.nav-panel a[aria-current="page"] { background: var(--surface-2); color: var(--link) !important; }
.nav-panel:not(:has(.nav-feature)) { padding-right: var(--space-6); }
.nav-panel > .nav-panel__col { --inset: 12px; flex: 1 1 0; min-width: 0; padding-block: var(--space-5) var(--space-6); }
.nav-panel__title { margin: 0 0 var(--space-2) var(--inset, 12px); font-size: .75rem; font-weight: 700; letter-spacing: .06em; line-height: 1.4; text-transform: uppercase; color: var(--text-subtle); }
.nav-panel__col--rich ul { grid-template-columns: minmax(0, 1fr); } /* Kolumna nie rośnie od opisu bez łamania. */
.nav-panel__col--rich a { display: flex; align-items: center; gap: 14px; padding: 10px var(--inset); border-radius: var(--radius-sm); }
.nav-panel__text { min-width: 0; }
/* Ikona w kafelku w barwach logotypu (uwaga właściciela 17.10.2026). Jasny: kafelek 22% koloru znaku na tle karty,
   ikona w odcieniu -strong (kontrast ≥ 3:1); ciemny: kafelek 18%, ikona w czystym kolorze znaku. Jeden róg
   zaokrąglony mocniej jak skrzydło śmigła (--blade sezonu), docs/frontend/navigation.md. */
.nav-panel__icon {
  --r: 9px; --r-blade: 20px;
  display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--r);
  background: color-mix(in srgb, var(--tone) 22%, var(--surface)); color: var(--tone-ink);
}
.nav-panel__icon svg { width: 20px; height: 20px; }
.nav-panel__icon--zima   { --tone: var(--mp-zima);   --tone-ink: var(--mp-zima-strong);   border-top-right-radius: var(--r-blade); }
.nav-panel__icon--wiosna { --tone: var(--mp-wiosna); --tone-ink: var(--mp-wiosna-strong); border-bottom-right-radius: var(--r-blade); }
.nav-panel__icon--lato   { --tone: var(--mp-lato);   --tone-ink: var(--mp-lato-strong);   border-bottom-left-radius: var(--r-blade); }
.nav-panel__icon--jesien { --tone: var(--mp-jesien); --tone-ink: var(--mp-jesien-strong); border-top-left-radius: var(--r-blade); }
[data-theme="dark"] .nav-panel__icon { background: color-mix(in srgb, var(--tone) 18%, var(--surface)); color: var(--tone); }
.nav-panel__label { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.nav-panel__label svg { flex: none; width: 16px; height: 16px; opacity: 0; translate: -4px 0; transition: opacity .16s var(--ease), translate .16s var(--ease); }
:is(.nav-panel__col--rich, .search-panel__links) a:is(:hover, :focus-visible) .nav-panel__label { color: var(--link); }
:is(.nav-panel__col--rich, .search-panel__links) a:is(:hover, :focus-visible) .nav-panel__label svg { opacity: 1; translate: 0 0; }
/* Opis zawsze w jednej linii (uwaga właściciela 17.10.2026): tekst ma się mieścić sam, ellipsis to tylko zabezpieczenie. */
.nav-panel__desc { display: block; margin-top: 3px; overflow: hidden; font-size: .875rem; font-weight: 400; line-height: 1.4; color: var(--text-subtle); white-space: nowrap; text-overflow: ellipsis; }
.nav-panel__col--compact ul { grid-template-columns: repeat(2, minmax(max-content, 1fr)); } /* Przy 1024 px „Science fiction” dostaje tyle miejsca, ile potrzebuje. */
.nav-panel__col--compact a { padding: 8px var(--inset); white-space: nowrap; }
.nav-panel > .nav-panel__col--services { --inset: 0px; }
.nav-panel__col--services ul { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
.nav-panel__col--services .nav-panel__service { display: grid; place-items: center; height: 56px; padding: 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); --logo-h: 20px; }
.nav-panel__service:hover { border-color: var(--border-strong); }
.nav-panel__logo { display: contents; }
.nav-feature {
  --inset: 0px; flex: 1.6 1 0; min-width: 0; padding: var(--space-5) var(--space-6) var(--space-6);
  border-radius: 0 calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0; background: var(--surface-2);
}
.nav-feature .nav-panel__title { margin-bottom: var(--space-4); }
.nav-feature__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5) !important; }
.nav-feature__card { display: grid !important; gap: 8px; padding: 0 !important; background: none !important; white-space: normal !important; }
.nav-feature__card .poster { border-radius: var(--radius-sm); box-shadow: none; }
.nav-feature__card .poster__label strong { font-size: .8125rem; }
.nav-feature__card:hover .nav-feature__title { color: var(--link); }
.nav-feature__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .9375rem; font-weight: 700; line-height: 1.3; }
.nav-feature__meta { margin-top: -4px; font-size: .8125rem; font-weight: 400; color: var(--text-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1279.98px) {
  .nav-panel { gap: var(--space-5); padding-left: var(--space-5); }
  .nav-panel > .nav-panel__col--compact { --inset: 8px; }
  /* Kolumna z ikonami szersza, żeby tytuł i opis linku mieściły się w jednej linii także przy 1024 px. */
  .nav-panel > .nav-panel__col--rich { flex-grow: 1.2; }
  .nav-feature { flex-grow: 1.25; padding-inline: var(--space-5); }
  .nav-feature__grid { gap: var(--space-4) !important; }
}
/* Okładki dopiero po pierwszym otwarciu (zamknięty panel jest w widoku, więc lazy-loading by ich nie wstrzymał). */
.js .primary-nav__item:not(.is-loaded) .nav-feature, html:not(.js) .has-panel:not(:hover, :focus-within) .nav-feature { display: none; }
/* Link „Wszystkie…” bez tła, wyrównany do tekstu kolumny (--inset), także pod okładkami i kafelkami serwisów. */
.nav-panel__all { display: inline-flex !important; align-items: center; gap: 4px; margin: var(--space-3) 0 0 var(--inset, 12px); padding: 4px 0 !important; background: none !important; color: var(--link) !important; font-weight: 700; }
.nav-panel__all:hover { text-decoration: underline; text-underline-offset: 3px; }
.nav-panel__all svg { width: 16px; height: 16px; }

/* Wyszukiwarka desktop (header.php): lupa w pasku, a pod nagłówkiem panel na całą szerokość kontenera, w stylu
   megamenu (ta sama karta, odstęp i animacja). Bez JS lupa jest linkiem do strony wyszukiwania. */
.search-toggle, .search-panel { display: none; }
@media (min-width: 1024px) {
  .site-header > .container { position: relative; }
  html:not(.js) .search-toggle--link, .js .search-toggle:not(.search-toggle--link) {
    display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0;
    border: 1px solid rgba(255, 255, 255, .14); border-radius: 50%; background: transparent; color: var(--mp-biel);
  }
  .js .search-panel {
    position: absolute; z-index: 60; left: var(--gutter); right: var(--gutter); top: calc(var(--header-h) + 6px);
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-5) var(--space-7);
    padding: var(--space-5) var(--space-6) var(--space-6); border-radius: var(--radius-lg);
    background: var(--surface); color: var(--text); border: 1px solid var(--border); box-shadow: var(--shadow);
    visibility: hidden; opacity: 0; translate: 0 -6px;
    transition: opacity .16s var(--ease), translate .16s var(--ease), visibility 0s linear .16s;
  }
  .js .search-panel.is-open { visibility: visible; opacity: 1; translate: 0 0; transition-delay: 0s; }
}
.search-toggle:hover, .search-toggle[aria-expanded="true"] { background: rgba(255, 255, 255, .08); }
.search-toggle svg { width: 18px; height: 18px; }
.search-toggle .icon-close, .search-toggle[aria-expanded="true"] .icon-search { display: none; }
.search-toggle[aria-expanded="true"] .icon-close { display: block; }
.search-panel__main { grid-column: 1 / -1; display: grid; gap: var(--space-2); padding-bottom: var(--space-5); border-bottom: 1px solid var(--border); }
.search-panel .search-field input { min-height: 56px; font-size: 1.0625rem; padding-right: 120px; }
.search-panel .search-field button { padding-inline: 24px; }
.search-panel__hint { margin: 0 0 0 4px; font-size: .875rem; color: var(--text-subtle); }
.search-panel__keys { margin-top: 4px; }
@media (hover: none), (pointer: coarse) { .search-panel__keys { display: none; } }
.search-panel__hint kbd { display: inline-block; min-width: 22px; padding: 1px 6px; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 6px; background: var(--surface-2); font: 600 .75rem/1.4 ui-monospace, monospace; text-align: center; }
.search-panel ul { list-style: none; margin: 0; padding: 0; }
.search-panel a { color: var(--text) !important; text-decoration: none; }
.search-panel :focus-visible { outline-color: var(--focus); }
.search-panel__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px var(--space-2); }
.search-panel__col { --inset: 12px; }
.search-panel__col:has(.search-panel__chips) { --inset: 0px; }
.search-panel__links a { display: flex; align-items: center; gap: 14px; padding: 10px var(--inset); border-radius: var(--radius-sm); }
.search-panel__links a:hover, .search-panel__links a[aria-current="page"] { background: var(--surface-2); }
@media (max-width: 1279.98px) { .search-panel__links { grid-template-columns: minmax(0, 1fr); } .search-panel__links a { padding-block: 7px; } }
.search-panel__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.search-panel__chips a { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; border: 1px solid var(--border); border-radius: var(--radius-pill); font-size: .9375rem; font-weight: 600; }
.search-panel__chips a:hover, .search-panel__chips a[aria-current="page"] { border-color: var(--link); color: var(--link) !important; }
.search-panel .nav-panel__all { color: var(--link) !important; }
@media (prefers-reduced-motion: reduce) { .nav-panel, .search-panel, .primary-nav__toggle svg { transition: none !important; } }

.header-search { flex: 1; max-width: 460px; margin-left: auto; }
.search-field { position: relative; display: flex; }
.search-field input {
  width: 100%; min-height: 44px; padding: 10px 92px 10px 44px;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .06); color: var(--mp-biel); text-overflow: ellipsis;
}
.search-field input::placeholder { color: var(--mp-mgla); opacity: 1; }
.search-field input:focus { outline: 2px solid var(--mp-biel); outline-offset: 2px; border-color: transparent; }
.search-field__icon { position: absolute; left: 16px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; color: var(--mp-mgla); pointer-events: none; }
.search-field button {
  position: absolute; right: 4px; top: 4px; bottom: 4px; padding-inline: 16px;
  border: 0; border-radius: var(--radius-pill); background: var(--mp-kobalt-500); color: var(--mp-biel); font-weight: 600;
}
.search-field button:hover { background: #D45C3F; }
.search-field--light input { background: var(--input-bg); color: var(--text); border-color: var(--input-border); min-height: 52px; }
.search-field--light input::placeholder { color: var(--text-subtle); }
.search-field--light input:focus { outline-color: var(--focus); }
.search-field--large input { min-height: 62px; font-size: 1.0625rem; padding-left: 52px; padding-right: 120px; background: rgba(255, 255, 255, .96); color: var(--mp-granat); border-color: transparent; box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .6); }
.search-field--large input::placeholder { color: var(--mp-stal); }
.search-field--large input:focus { outline-color: var(--mp-kobalt-500); outline-width: 3px; }
.search-field--large .search-field__icon { left: 20px; width: 20px; height: 20px; color: var(--mp-stal); }
.search-field--large button { padding-inline: 24px; right: 7px; top: 7px; bottom: 7px; }

.header-actions { display: flex; align-items: center; gap: var(--space-2); flex: none; }
.header-link { display: inline-flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--radius-pill); font-weight: 600; text-decoration: none; }
.header-link:hover { background: rgba(255, 255, 255, .08); }
.header-link svg { width: 18px; height: 18px; }
.theme-toggle { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .14); background: transparent; color: var(--mp-biel); }
.theme-toggle:hover { background: rgba(255, 255, 255, .08); }
.theme-toggle svg { width: 18px; height: 18px; }
[data-theme="dark"] .theme-toggle .icon-moon, :root:not([data-theme="dark"]) .theme-toggle .icon-sun { display: none; }

.site-header__search-row { padding-bottom: var(--space-3); }
.js .site-header__search-row { display: none; }

/* Mobile (< 1024 px, z JS): dolna belka jak w aplikacji + pełnoekranowy panel menu/wyszukiwania (components/app-nav.php). */
.tabbar, .app-sheet { display: none; }
@media (max-width: 1023.98px) {
  :root { --tabbar-h: 64px; }
  .js body { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
  .js .tabbar {
    position: fixed; z-index: 70; left: 0; right: 0; bottom: 0;
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: var(--mp-granat); color: var(--mp-mgla); border-top: 1px solid rgba(255, 255, 255, .08);
  }
  .js[data-theme="dark"] .tabbar { background: rgba(14, 14, 17, .92); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); }
  .tabbar__item {
    display: grid; justify-items: center; align-content: center; gap: 3px; padding: 0;
    border: 0; background: none; color: inherit; font: inherit; font-size: .6875rem; font-weight: 600; text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .tabbar__icon { display: grid; place-items: center; width: 52px; height: 30px; border-radius: var(--radius-pill); transition: background .2s var(--ease); }
  .tabbar__icon svg { width: 21px; height: 21px; }
  .tabbar__item[aria-current="page"], .tabbar__item[aria-expanded="true"] { color: var(--mp-biel); }
  .tabbar__item[aria-current="page"] .tabbar__icon, .tabbar__item[aria-expanded="true"] .tabbar__icon { background: rgba(255, 255, 255, .14); }
  .sheet-open .tabbar__item[aria-current="page"]:not([aria-expanded]) { color: var(--mp-mgla); }
  .sheet-open .tabbar__item[aria-current="page"] .tabbar__icon { background: none; }

  .js .app-sheet:not([hidden]) {
    position: fixed; z-index: 65; inset: 0; display: flex; flex-direction: column; gap: var(--space-5);
    height: 100vh; height: 100dvh; overflow-y: auto; overscroll-behavior: contain;
    padding: var(--space-4) var(--gutter) calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--space-6));
    background: var(--mp-granat); color: var(--mp-biel);
  }
  .js[data-theme="dark"] .app-sheet:not([hidden]) { background: var(--mp-czern); }
}
.app-sheet__head { display: flex; align-items: center; justify-content: space-between; min-height: 48px; }
.app-sheet__title { font-size: 1.5rem; letter-spacing: -.02em; }
.app-sheet .icon-btn:hover { background: rgba(255, 255, 255, .1); }
.app-sheet :focus-visible { outline-color: var(--mp-biel); } /* Ciemne tło panelu w obu motywach, jak w nagłówku. */
.app-sheet .search-field input { min-height: 52px; }
.app-sheet__nav, .app-sheet__info { list-style: none; margin: 0; padding: 0; display: grid; }
/* Grupy jak w megamenu (mangapilot_mobile_nav()): tytuł, wiersze z kolorową ikoną i opisem, link „Wszystkie…”. */
.app-sheet__group-title { margin: 0 0 var(--space-1); font-size: .75rem; font-weight: 700; letter-spacing: .06em; line-height: 1.4; text-transform: uppercase; color: var(--mp-mgla); }
.app-sheet__nav a {
  display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 8px 2px;
  color: var(--mp-biel); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.app-sheet__nav .nav-panel__text { flex: 1; }
.app-sheet__label { display: block; font-size: 1.0625rem; font-weight: 700; line-height: 1.3; }
.app-sheet .nav-panel__desc { color: var(--mp-mgla); }
/* Panel ma ciemne tło w obu motywach, więc kafelek jak w ciemnym megamenu: 18% koloru znaku, ikona w czystym kolorze. */
.app-sheet .nav-panel__icon { background: color-mix(in srgb, var(--tone) 18%, transparent); color: var(--tone); }
.app-sheet__chevron { flex: none; width: 20px; height: 20px; color: var(--mp-mgla); }
.app-sheet__all { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 2px; font-weight: 600; color: var(--mp-mgla); text-decoration: none; }
.app-sheet__all svg { width: 16px; height: 16px; }
.app-sheet__nav a[aria-current="page"] .app-sheet__label, .app-sheet__all[aria-current="page"] { color: var(--mp-zima); }
.app-sheet__info { gap: 4px; margin-top: auto; }
.app-sheet__info a { display: block; padding: 8px 2px; color: var(--mp-mgla); text-decoration: none; }
.app-sheet__info a:hover, .app-sheet__nav a:hover, .app-sheet__all:hover { color: var(--mp-biel); }

@media (max-width: 1023.98px) {
  .primary-nav, .header-actions .header-link--desktop { display: none; }
}
.header-actions { margin-left: auto; }
@media (min-width: 1024px) {
  .site-header { position: sticky; top: 0; }
  .site-header__search-row { display: none !important; }
}
@media (min-width: 1024px) and (max-width: 1199.98px) { .header-link--desktop span { display: none; } }

/* Breadcrumbs */
.breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: .875rem; color: var(--text-subtle); }
.breadcrumbs li { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.breadcrumbs li + li::before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor; rotate: 45deg; opacity: .7; }
.breadcrumbs a { color: inherit; }
.breadcrumbs [aria-current] { color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
/* Telefon: długi tytuł bieżącej strony w okruszkach w jednej linii (pełny tytuł jest w H1 tuż niżej). */
@media (max-width: 767.98px) {
  .breadcrumbs { min-width: 0; max-width: 100%; overflow: hidden; }
  .breadcrumbs ol { flex-wrap: nowrap; min-width: 0; }
  .breadcrumbs li { flex: none; }
  .breadcrumbs li:last-child { flex: 1 1 auto; min-width: 0; }
  .breadcrumbs [aria-current] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; }
}

/* Przyciski: akcja to <button>, nawigacja to <a>. Kolor sezonu nigdy nie zastępuje kobaltu. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 20px; border: 1.5px solid transparent; border-radius: var(--radius-pill);
  font-weight: 600; line-height: 1.2; text-decoration: none; text-align: center; white-space: nowrap;
  transition: background-color .15s, border-color .15s, color .15s, translate .15s var(--ease), box-shadow .15s;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--primary { background: var(--accent); color: var(--on-accent); box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--mp-kobalt-500) 80%, transparent); }
.btn--primary:hover { background: var(--accent-hover); translate: 0 -1px; }
.btn--secondary { background: var(--surface); color: var(--link); border-color: var(--border-strong); }
.btn--secondary:hover { border-color: var(--link); }
.btn--on-dark, .btn--ghost { background: rgba(255, 255, 255, .06); color: var(--text); border-color: var(--border-strong); }
.btn--on-dark:hover, .btn--ghost:hover { border-color: var(--text); background: rgba(255, 255, 255, .12); }
.btn--light { background: var(--mp-biel); color: var(--mp-granat); }
.btn--light:hover { background: var(--mp-lod); }
.btn--lg { min-height: 52px; padding-inline: 26px; font-size: 1.0625rem; }
.btn--sm { min-height: 36px; padding: 6px 14px; font-size: .875rem; }
.btn--text { background: none; border: 0; padding-inline: 4px; color: var(--link); text-decoration: underline; text-underline-offset: .18em; min-height: 36px; box-shadow: none; }
.btn[disabled], .btn[aria-busy="true"] { opacity: .65; cursor: progress; translate: none; }

/* Plakietki. Dwie odrębne rodziny statusów: emisja (.status) i prywatna lista (.list-status). */
.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-pill);
  background: var(--chip-bg); border: 1px solid var(--border); color: var(--text);
  font-size: .8125rem; font-weight: 600; line-height: 1.4; white-space: nowrap;
}
.badge--season { background: var(--season-bg); border-color: transparent; color: var(--season-fg); }
.badge--season::before { content: ""; width: 9px; height: 9px; border-radius: var(--blade); background: var(--season-graphic); }

.status { display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; font-weight: 600; line-height: 1.4; color: var(--text-muted); white-space: nowrap; }
.status::before { content: ""; width: 10px; height: 10px; border-radius: var(--blade); border: 1.5px solid currentColor; flex: none; }
.status--airing { color: var(--link); }
.status--airing::before { background: currentColor; animation: pulse 2.4s ease-in-out infinite; }
.status--finished::before { background: currentColor; opacity: .8; }
.status--announced::before { border-style: dashed; }
.status--hiatus::before { border-style: dotted; }
.status--cancelled::before { background: linear-gradient(135deg, transparent 45%, currentColor 45% 60%, transparent 60%); }

.list-status {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); border: 1.5px solid var(--accent);
  font-size: .875rem; font-weight: 600;
}
.list-status svg { width: 16px; height: 16px; color: var(--accent); }

/* Okładka: proporcja 2:3 zarezerwowana zawsze; brak pliku → grafika zastępcza marki pod obrazkiem. */
.poster {
  position: relative; aspect-ratio: 2 / 3; overflow: hidden; border-radius: var(--radius-md);
  background: var(--mp-granat); background-image: var(--grid-lines); background-size: 28px 28px;
  isolation: isolate; box-shadow: var(--poster-shadow);
}
.poster::before {
  /* Przycięte skrzydło znaku (księga znaku, rozdz. 8) — widoczne tylko, gdy brak obrazu. */
  content: ""; position: absolute; z-index: -1; width: 86%; aspect-ratio: 1; right: -18%; top: -16%;
  background: var(--mp-kobalt-500); border-bottom-left-radius: 100%;
}
.poster::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); pointer-events: none; }
.poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: scale .5s var(--ease); }
.poster__label {
  position: absolute; inset: auto 10px 10px 10px; font-size: .75rem; line-height: 1.3; font-weight: 600;
  color: var(--mp-mgla); letter-spacing: .02em;
}
.poster__label strong { display: -webkit-box; color: var(--mp-biel); font-size: .9375rem; letter-spacing: -.01em; margin-bottom: 2px; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.poster img ~ .poster__label { display: none; }
.poster__chip {
  position: absolute; z-index: 2; top: 8px; left: 8px; display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: var(--radius-pill); background: rgba(14, 14, 17, .78); color: var(--mp-biel);
  font-size: .75rem; font-weight: 700; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.poster__chip::before { content: ""; width: 9px; height: 9px; border-radius: var(--blade); background: var(--mp-link-ciemny); animation: pulse 2.4s ease-in-out infinite; }
.poster__chip--announced::before { background: transparent; border: 1.5px dashed var(--mp-biel); animation: none; }

/* Karta anime: wspólny markup dla strony głównej, katalogu, wyszukiwarki i powiązań. */
.anime-card { position: relative; display: grid; gap: var(--space-3); align-content: start; min-width: 0; }
.anime-card__title { font-size: 1rem; line-height: 1.35; letter-spacing: -.01em; font-weight: 700;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.anime-card__title a { color: var(--text); text-decoration: none; }
.anime-card__title a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-md); z-index: 3; }
.anime-card:hover .anime-card__title a { color: var(--link); }
.anime-card__media { position: relative; transition: translate .3s var(--ease); }
.anime-card .poster { transition: box-shadow .3s var(--ease); }
/* Okładka i „+” unoszą się razem, więc przycisk zostaje w rogu okładki. */
.anime-card:hover .anime-card__media, .anime-card:focus-within .anime-card__media { translate: 0 -4px; }
.anime-card:hover .poster, .anime-card:focus-within .poster { box-shadow: 0 24px 40px -18px rgba(0, 0, 0, .7), 0 0 0 2px var(--mp-kobalt-500); }
/* Status na dole okładki: lewy górny róg należy do „+”. */
.anime-card .poster__chip { top: auto; bottom: 8px; }
.anime-card__meta--one { flex-wrap: nowrap; overflow: hidden; }
.anime-card__meta--one > :last-child { overflow: hidden; text-overflow: ellipsis; }
.anime-card:hover .poster img { scale: 1.05; }
.anime-card__meta { display: flex; flex-wrap: wrap; gap: 2px 8px; font-size: .8125rem; color: var(--text-subtle); }
/* Kropka na końcu poprzedniego elementu: przy zawijaniu wiersz nie zaczyna się od separatora. */
.anime-card__meta > * { white-space: nowrap; }
.anime-card__meta > :not(:last-child)::after { content: "·"; margin-left: 8px; }
.anime-card__body { display: grid; gap: 4px; }
.anime-card__summary { font-size: .875rem; line-height: 1.55; color: var(--text-muted);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.anime-card .list-status { position: absolute; top: 8px; left: 8px; font-size: .75rem; z-index: 2; }

.anime-card--row { grid-template-columns: 88px minmax(0, 1fr); gap: var(--space-4); padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); transition: border-color .2s, background-color .2s; }
.anime-card--row .poster { border-radius: var(--radius-sm); box-shadow: none; }
.anime-card--row:hover .poster, .anime-card--row:focus-within .poster { translate: none; box-shadow: none; }
.anime-card--row:hover { border-color: var(--accent); background: var(--surface-2); }
.anime-card--row .anime-card__title { font-size: 1.125rem; }
.anime-card--row .anime-card__title a::after { border-radius: var(--radius-lg); }
@media (min-width: 640px) { .anime-card--row { grid-template-columns: 104px minmax(0, 1fr); } }
.anime-card__aliases { font-size: .875rem; color: var(--text-muted); overflow-wrap: anywhere; }
mark { background: var(--mark-bg); color: inherit; font-weight: 700; padding: 0 2px; border-radius: 3px; }

/* Karta artykułu: news i poradnik to jeden komponent z etykietą typu. */
.article-card { position: relative; display: grid; gap: var(--space-3); align-content: start; min-width: 0; }
.article-card__media { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-md); overflow: hidden; background: var(--mp-granat); }
.article-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; transition: scale .5s var(--ease); }
.article-card__media::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.article-card:hover .article-card__media img { scale: 1.04; }
/* Miniatura z okładki (brak poziomej grafiki promocyjnej): okładka na środku, ta sama rozmyta w tle. */
.article-card__media--poster img:not(.thumb-blur) { position: absolute; left: 50%; top: 8%; width: auto; height: 84%; aspect-ratio: 2 / 3; translate: -50% 0; border-radius: 6px; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .8); }
.thumb-blur { position: absolute; left: -15%; top: -15%; width: 130% !important; height: 130% !important; max-width: none; object-fit: cover; filter: blur(28px) saturate(1.6) brightness(.42); }
.article-card:hover .article-card__media--poster img { scale: 1; }
.article-figure--poster { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); background: var(--mp-czern); }
.article-figure--poster img:not(.thumb-blur) { position: absolute; left: 50%; top: 8%; width: auto; height: 84%; aspect-ratio: 2 / 3; translate: -50% 0; object-fit: cover; border-radius: 8px; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .8); }
.article-card__title { font-size: 1.1875rem; line-height: 1.32; letter-spacing: -.012em; font-weight: 700; overflow-wrap: break-word; }
.article-card__title a { color: var(--text); text-decoration: none; }
.article-card__title a::after { content: ""; position: absolute; inset: 0; }
.article-card:hover .article-card__title a { color: var(--link); }
.article-card__excerpt { color: var(--text-muted); font-size: .9375rem; line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.article-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: .8125rem; color: var(--text-subtle); }
.article-card__about { position: relative; z-index: 1; font-size: .8125rem; }
.type-label { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--link); }
.type-label--guide { color: var(--text); }
.spoiler-label { display: inline-block; margin-left: 6px; padding: 1px 8px; border: 1px solid currentColor; border-radius: var(--radius-pill); font-size: .6875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); vertical-align: 1px; }
.info-kind { display: inline-flex; align-items: center; gap: 5px; font-size: .75rem; font-weight: 600; padding: 2px 9px 2px 7px; border-radius: var(--radius-pill); border: 1px solid var(--border-strong); color: var(--text); background: var(--surface); line-height: 1.5; }
.info-kind::before { content: ""; width: 12px; height: 12px; flex: none; background: currentColor; -webkit-mask: var(--ik) center / contain no-repeat; mask: var(--ik) center / contain no-repeat;
  --ik: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2.5 6.2 2.3 2.3L9.5 3.5'/%3E%3C/svg%3E"); }
.info-kind--announced::before { --ik: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='6' cy='6' r='4.6'/%3E%3Cpath d='M6 3.5V6l1.7 1.2'/%3E%3C/svg%3E"); }
.info-kind--rumor { border-style: dashed; color: var(--text-muted); }
.info-kind--rumor::before { --ik: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M4.3 4.4a1.8 1.8 0 1 1 2.4 1.7c-.5.2-.7.6-.7 1.1v.3M6 9.6h.01'/%3E%3C/svg%3E"); }
.legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; font-size: .875rem; color: var(--text-muted); }

.article-card--row { grid-template-columns: minmax(0, 1fr); padding-block: var(--space-5); border-top: 1px solid var(--border); }
@media (min-width: 768px) {
  .article-card--row { grid-template-columns: 240px minmax(0, 1fr); gap: var(--space-5); align-items: start; }
  .article-card--feature { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-6); align-items: center; }
  .article-card--feature .article-card__title { font-size: 1.875rem; line-height: 1.18; letter-spacing: -.02em; }
}

/* Układ „Co nowego” na stronie głównej: jedna duża + lista kompaktowa. */
.news-bento { display: grid; gap: var(--space-5); }
@media (min-width: 1024px) { .news-bento { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--space-6); } }
.news-bento .article-card--big .article-card__title { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); line-height: 1.18; letter-spacing: -.02em; }
.news-list { display: grid; align-content: start; }
.article-card--compact { grid-template-columns: 132px minmax(0, 1fr); gap: var(--space-4); align-items: start; padding-block: var(--space-4); border-bottom: 1px solid var(--border); }
.article-card--compact:first-child { padding-top: 0; }
.article-card--compact .article-card__media { aspect-ratio: 4 / 3; border-radius: var(--radius-sm); }
.article-card--compact .article-card__title { font-size: 1.0625rem; }

/* Ilustracja zastępcza marki (gdy artykuł nie ma grafiki). */
.art { position: relative; overflow: hidden; background: var(--mp-granat); background-image: var(--grid-lines); background-size: 32px 32px; isolation: isolate; }
.art::before { content: ""; position: absolute; z-index: -1; width: 64%; aspect-ratio: 1; right: -14%; bottom: -46%; background: var(--mp-kobalt-500); border-top-left-radius: 100%; }
.art::after { content: ""; position: absolute; z-index: -1; width: 22%; aspect-ratio: 1; left: 8%; top: -8%; background: var(--mp-kobalt-500); opacity: .4; border-bottom-right-radius: 100%; }

/* Listy faktów */
.facts { margin: 0; display: grid; }
.facts > div { display: grid; grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr); gap: var(--space-3); padding-block: 11px; border-bottom: 1px solid var(--border); }
.facts > div:last-child { border-bottom: 0; }
.facts dt { color: var(--text-subtle); font-size: .9375rem; }
.facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.facts dd .muted { font-weight: 400; }

/* Kluczowe fakty jako duże liczby */
.keyfacts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-5); margin: 0; }
.keyfacts > div { display: grid; gap: 2px; min-width: 0; padding-left: var(--space-4); border-left: 2px solid var(--border-strong); }
.keyfacts dt { order: 2; font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-subtle); }
.keyfacts dd { order: 1; margin: 0; font-weight: 700; font-size: clamp(1.25rem, 1.05rem + .8vw, 1.75rem); line-height: 1.15; letter-spacing: -.02em; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.keyfacts dd small { font-size: .55em; font-weight: 600; letter-spacing: 0; color: var(--text-muted); margin-left: 2px; }
/* Tyle kolumn, ile się zmieści (min. 128 px): w wąskiej kolumnie hero na tablecie daty nie łamią się w środku. */
@media (min-width: 640px) { .keyfacts { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); } }
.keyfacts dd time { white-space: nowrap; }

/* „Nowy odcinek” w nagłówku karty: jedna belka na szerokość kolumny (ikona, etykieta, termin, opis), na telefonie zawija się.
   Widoczny tylko pierwszy przyszły odcinek (site.js usuwa wyemitowane). */
.next-episode { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--space-3); margin-top: var(--space-5); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: rgba(255, 255, 255, .07); }
.next-episode[hidden] { display: none; }
.next-episode__icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .1); color: var(--mp-biel); }
.next-episode__icon svg { width: 18px; height: 18px; }
.next-episode__label { font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-subtle); }
.next-episode__items { margin: 0; padding: 0; list-style: none; font-weight: 600; }
.next-episode__items li:not(:first-child) { display: none; }
.next-episode__items strong { font-weight: 700; }
.next-episode__items time { white-space: nowrap; }
.next-episode__items time::before { content: "· "; }
.next-episode__note { margin-left: auto; font-size: .75rem; color: var(--text-subtle); }

/* Panele i komunikaty */
.panel { padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.panel--tint { background: var(--surface-2); border-color: transparent; }
.panel__title { font-size: 1.125rem; line-height: 1.35; margin-bottom: var(--space-3); letter-spacing: -.01em; }
.panel .facts > div { grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr); }
.notice { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface-2); font-size: .9375rem; line-height: 1.55; }
.notice svg { width: 22px; height: 22px; color: var(--link); }
/* Kolumna 22 px tylko przy ikonie na początku. Bez ikony (np. „Zobacz też”: div z strong i ul, sam tekst z JS) treść ma pełną szerokość; kolejne dzieci po ikonie zostają w kolumnie treści. */
.notice:has(> svg:first-child) { grid-template-columns: 22px minmax(0, 1fr); }
.notice > svg:first-child ~ * { grid-column: 2; }
.notice--warning { background: var(--warning-bg); }
.notice--warning svg { color: var(--warning-fg); }
.notice--error { background: var(--error-bg); }
.notice--error svg { color: var(--error); }
.notice strong { display: block; }

/* Szybkie odpowiedzi: samodzielne zdania z faktami — czytelne dla ludzi i cytowalne przez wyszukiwarki AI. */
/* „W skrócie”: pytanie i odpowiedź jako wiersze oddzielone linią (bez pudełek i paska z boku). */
.answers { margin: 0; }
.answers > div { display: grid; gap: 4px var(--space-5); padding: var(--space-4) 0; border-top: 1px solid var(--border); }
.answers > div:last-child { border-bottom: 1px solid var(--border); }
.answers dt { font-weight: 700; font-size: 1rem; line-height: 1.45; }
.answers dd { margin: 0; color: var(--text-muted); line-height: 1.6; }
.answers dd a { font-weight: 600; }
@media (min-width: 768px) { .answers > div { grid-template-columns: 260px minmax(0, 1fr); } }

/* Spis treści */
.toc { font-size: .9375rem; }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.toc a { display: block; padding: 6px 0 6px 14px; border-left: 2px solid var(--border); color: var(--text-muted); text-decoration: none; line-height: 1.4; }
.toc a:hover { color: var(--text); border-color: var(--accent); }

/* Gdzie obejrzeć: wiersze serwisów — logo w stałym polu, informacje, przycisk o stałej szerokości. */
.vod-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.vod-row { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: var(--space-3) var(--space-4); padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); transition: border-color .2s; }
.vod-row:hover { border-color: var(--border-strong); }
.vod-row__logo { display: grid; place-items: center; height: 56px; border-radius: var(--radius-md); background: var(--surface-2); }
.vod-row__logo { --logo-h: 28px; padding: 0 8px; }
.vod-row__logo--text { font-weight: 800; font-size: .9375rem; color: var(--text); text-align: center; padding: 4px; }
/* Logotypy VOD: wysokość bazowa z kontekstu (--logo-h) razy korekta optyczna z PHP (--logo-k). */
.provider-logo { width: auto; height: calc(var(--logo-h, 28px) * var(--logo-k, 1)); max-width: 100%; object-fit: contain; }
[data-theme="dark"] .provider-logo--light, :root:not([data-theme="dark"]) .provider-logo--dark { display: none; }
.vod-row__name { font-weight: 700; font-size: 1.0625rem; line-height: 1.3; }
.vod-row__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 2px; font-size: .875rem; color: var(--text-muted); }
.vod-row__source { margin-top: 2px; font-size: .8125rem; color: var(--text-muted); }
.pl-badge { display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; font-weight: 600; color: var(--text); }
.flag-pl { width: 18px; height: 12px; border-radius: 2px; box-shadow: 0 0 0 1px var(--border-strong); flex: none; }
.vod-row__cta { grid-column: 1 / -1; width: 100%; }
.vod-row--stale { border-style: dashed; }
@media (min-width: 560px) {
  .vod-row { grid-template-columns: 112px minmax(0, 1fr) 148px; }
  .vod-row__cta { grid-column: auto; }
}

/* Źródła i weryfikacja: dyskretny box na końcu karty. */
.meta-box { margin-top: var(--space-8); padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); background: var(--surface-2); font-size: .8125rem; line-height: 1.55; color: var(--text-subtle); display: grid; gap: 6px; scroll-margin-top: calc(var(--header-h) + 72px); }
.meta-box__title { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.meta-box a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.meta-box a:hover { color: var(--text); }
.meta-box__details summary { cursor: pointer; width: fit-content; }
.meta-box__details summary:hover { color: var(--text); }
.meta-box__details ul { margin: 6px 0 0; padding-left: 1.1em; display: grid; gap: 2px; }

/* Relacje i kolejność oglądania */
.watch-order { --step-y: 54px; position: relative; list-style: none; margin: 0; padding: 0 0 0 44px; display: grid; gap: var(--space-3); }
/* Oś czasu: linia łącząca kroki po lewej. */
/* Okładka i tekst wyrównane do góry; numer na wysokości środka okładki (--step-y), łącznik od numeru do następnego numeru. */
.watch-order > li:not(:last-child)::after { content: ""; position: absolute; left: -31px; top: var(--step-y); height: calc(100% + var(--space-3)); width: 2px; border-radius: 2px; background: var(--border); }
.watch-order > li { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--space-4); align-items: start; padding: var(--space-3) var(--space-4) var(--space-3) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.watch-order > li[aria-current] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.watch-order .poster { border-radius: var(--radius-sm); box-shadow: none; }
/* Sezony jako zakładki S1, S2… (karta z częściami serialu). */
.season-tabs__list { display: flex; flex-wrap: wrap; gap: 10px; margin: var(--space-3) 0 var(--space-4); }
.season-tabs__list[hidden] { display: none; }
.season-tabs__list button { min-width: 44px; height: 44px; padding: 0 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); background: none; color: var(--text); font: inherit; font-weight: 700; cursor: pointer; }
.season-tabs__list button:hover { border-color: var(--text); }
.season-tabs__list button[aria-selected="true"] { border-color: var(--link); background: var(--link); color: var(--mp-biel); }
.season-panel { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--space-5); padding: var(--space-4) 0; border-top: 1px solid var(--border); }
.season-panel:last-child { border-bottom: 1px solid var(--border); }
.season-panel[hidden] { display: none; }
.season-tabs.is-ready .season-panel { border-bottom: 1px solid var(--border); }
.season-panel .poster { border-radius: var(--radius-sm); box-shadow: none; }
.season-panel h4 { margin: 0 0 4px; font-size: 1.125rem; }
.season-panel p { margin: 6px 0 0; color: var(--text-muted); font-size: .9375rem; }
.season-panel__meta { display: flex; flex-wrap: wrap; gap: 0 8px; }
.season-panel__meta > * + *::before { content: "·"; margin-right: 8px; color: var(--text-subtle); }
.watch-order__step { position: absolute; z-index: 1; left: -44px; top: var(--step-y); translate: 0 -50%; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--mp-biel); font-size: .8125rem; font-weight: 800; box-shadow: 0 0 0 4px var(--bg); }
/* Dodatki opcjonalne (spin-off, OVA, podsumowanie): lżejsza karta i pusty znacznik „+”. */
.watch-order > li.is-extra { background: transparent; border-style: dashed; }
.watch-order > li.is-extra .watch-order__step { background: var(--bg); color: var(--text); box-shadow: inset 0 0 0 2px var(--text-subtle), 0 0 0 4px var(--bg); }
.watch-order > li.is-extra .relation__title { font-weight: 600; }
@media (max-width: 479.98px) {
  .watch-order { --step-y: 48px; padding-left: 36px; }
  .watch-order > li:not(:last-child)::after { left: -25px; }
  .watch-order__step { left: -36px; width: 24px; height: 24px; font-size: .75rem; }
  .watch-order > li { grid-template-columns: 48px minmax(0, 1fr); gap: var(--space-3); }
}
/* Rozbudowana kolejność: kilka ścieżek (np. TV i filmy) z nagłówkiem i krótkim opisem. */
.title-section > .prose + h3, .title-section > .watch-order + h3 { margin-top: var(--space-7); }
#kolejnosc > h3 { display: flex; align-items: center; gap: 10px; font-size: 1.25rem; letter-spacing: -.01em; margin-bottom: var(--space-2); }
#kolejnosc > h3::before { content: ""; flex: none; width: 4px; height: 1.1em; border-radius: 2px; background: var(--accent); }
#kolejnosc > h3 + .prose { color: var(--text-muted); font-size: .9375rem; max-width: 64ch; }
#kolejnosc > h3 + .prose + .watch-order { margin-top: var(--space-4); }
.relation p { margin: 4px 0 0; font-size: .875rem; line-height: 1.5; color: var(--text-muted); }
.relation small { margin-top: 2px; font-size: .75rem; color: var(--text-subtle); }
.relation small a { color: inherit; }
.relation small a:hover { color: var(--link); }
.relation { display: grid; gap: 2px; min-width: 0; }
.relation p { overflow-wrap: anywhere; }
.relation__type { font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-subtle); }
.relation__title { font-weight: 700; font-size: 1.0625rem; overflow-wrap: anywhere; color: var(--text); }
a.relation__title { text-decoration: none; }
a.relation__title:hover { color: var(--link); text-decoration: underline; }
.relation__meta { font-size: .875rem; color: var(--text-muted); }

/* Źródła */
.sources { margin: 0; padding-left: 1.25rem; display: grid; gap: var(--space-2); font-size: .9375rem; }
.sources li::marker { color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.sources .muted { font-size: .875rem; }
.verified { display: inline-flex; align-items: center; gap: 6px; font-size: .875rem; color: var(--text-muted); }
.verified svg { width: 16px; height: 16px; color: var(--link); }

/* Formularze */
.field { display: grid; gap: 6px; }
.field label, .field legend { font-weight: 600; font-size: .9375rem; }
.field__hint { font-size: .875rem; color: var(--text-muted); }
.field__error { font-size: .875rem; color: var(--error); font-weight: 600; display: flex; gap: 6px; }
.field__error::before { content: "!"; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--error); color: var(--bg); font-size: .75rem; flex: none; margin-top: 2px; }
.input, .select {
  width: 100%; min-height: 48px; padding: 10px 14px; border: 1.5px solid var(--input-border); border-radius: var(--radius-sm);
  background-color: var(--input-bg); color: var(--text);
}
.input::placeholder { color: var(--text-subtle); }
.input:hover, .select:hover { border-color: var(--border-strong); }
.input:focus, .select:focus { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
.input[aria-invalid="true"] { border-color: var(--error); }
.select:disabled, .input:disabled { background-color: var(--surface-2); color: var(--text-subtle); cursor: not-allowed; }
.select { appearance: none; padding-right: 40px; background-image: var(--select-arrow); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; }
.select--sm { min-height: 40px; padding-block: 6px; font-size: .9375rem; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.choice { display: flex; align-items: center; gap: 10px; min-height: 40px; cursor: pointer; }
.choice input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); flex: none; }
.choice__count { margin-left: auto; font-size: .8125rem; color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.password-field { position: relative; }
.password-field .input { padding-right: 132px; }
.password-field button { position: absolute; right: 6px; top: 6px; bottom: 6px; padding-inline: 12px; border: 0; border-radius: 8px; background: var(--surface-2); color: var(--link); font-weight: 600; font-size: .875rem; }

.status-options { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.status-option { position: relative; }
.status-option input { position: absolute; opacity: 0; inset: 0; }
.status-option span { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 14px; border: 1.5px solid var(--input-border); border-radius: var(--radius-sm); font-weight: 600; cursor: pointer; }
.status-option span::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--text-subtle); flex: none; }
.status-option input:checked + span { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.status-option input:checked + span::before { border: 6px solid var(--accent); }
.status-option input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Dialog (natywny <dialog>: fokus, Escape, powrót do wywołującego elementu) */
.dialog { width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); color: var(--text); box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .7); }
.dialog::backdrop { background: var(--overlay); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.dialog__head { display: flex; align-items: start; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) var(--space-5) 0; }
.dialog__head h2 { font-size: 1.375rem; }
.dialog__body { padding: var(--space-5); display: grid; gap: var(--space-5); }
.dialog__foot { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: space-between; align-items: center; padding: var(--space-4) var(--space-5); border-top: 1px solid var(--border); background: var(--surface-2); }
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: inherit; flex: none; }
.icon-btn:hover { background: var(--surface-2); }
.icon-btn svg { width: 20px; height: 20px; }

/* Filtry, sortowanie, aktywne kryteria */
.filters { display: grid; gap: var(--space-5); }
.filters__group { padding-bottom: var(--space-5); border-bottom: 1px solid var(--border); }
.filters__group legend { font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-subtle); margin-bottom: var(--space-2); }
.filters__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.filters-toggle { display: none; }
.filters-panel__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-4); }
@media (max-width: 1023.98px) {
  .js .filters-toggle { display: inline-flex; }
  .js .filters-panel { position: fixed; inset: 0; z-index: 80; background: var(--bg); overflow-y: auto; padding: var(--space-5) var(--gutter) 120px; }
  .js .filters-panel:not(.is-open) { display: none; }
  .js .filters__actions { position: fixed; left: 0; right: 0; bottom: 0; padding: var(--space-4) var(--gutter); background: var(--bg); border-top: 1px solid var(--border); }
  .js .filters__actions .btn { flex: 1; }
}
@media (min-width: 1024px) { .filters-panel__head .icon-btn { display: none; } }

.results-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding-bottom: var(--space-4); margin-bottom: var(--space-5); border-bottom: 1px solid var(--border); }
.results-bar__count { font-weight: 600; }
.sort { display: flex; align-items: center; gap: var(--space-2); }
.sort label { font-size: .875rem; color: var(--text-subtle); white-space: nowrap; }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-bottom: var(--space-5); }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 14px; border-radius: var(--radius-pill); background: var(--chip-bg); border: 1px solid var(--border-strong); color: var(--text); font-size: .875rem; font-weight: 600; text-decoration: none; }
.chip svg { width: 16px; height: 16px; }
/* Chip z ikoną na końcu (np. usuń filtr): mniejszy prawy margines, bo ikona ma własne pole. */
.chip:has(> svg:last-child), .chip:has(> svg + .visually-hidden:last-child) { padding-right: 8px; }
.chip:hover { border-color: var(--link); }

.segmented { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.segmented a, .segmented button { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 14px; border-radius: var(--radius-pill); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font-weight: 600; font-size: .9375rem; text-decoration: none; }
.segmented a:hover, .segmented button:hover { border-color: var(--link); }
.segmented [aria-current="page"], .segmented [aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }
.segmented .count { font-weight: 400; opacity: .75; font-variant-numeric: tabular-nums; }

/* Paginacja: zwykłe linki z własnymi adresami */
.pagination { margin-top: var(--space-7); }
.pagination ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
.pagination .page-numbers { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 14px; border-radius: var(--radius-pill); border: 1px solid var(--border-strong); color: var(--text); text-decoration: none; font-weight: 600; font-variant-numeric: tabular-nums; }
.pagination a:hover { border-color: var(--link); color: var(--link); }
.pagination [aria-current="page"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.pagination .disabled { color: var(--text-subtle); border-style: dashed; }
.pagination__summary { text-align: center; margin-top: var(--space-3); font-size: .875rem; color: var(--text-subtle); }

/* Puste stany */
.empty { display: grid; justify-items: center; text-align: center; gap: var(--space-3); padding: var(--space-8) var(--space-5); border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); background: var(--surface); }
.empty__mark { width: 56px; height: 56px; margin-bottom: var(--space-2); }
.empty p { color: var(--text-muted); max-width: 52ch; }
.empty .cluster { justify-content: center; margin-top: var(--space-3); }

/* Treść redakcyjna (bloki Gutenberga) */
.prose { font-size: 1.0625rem; line-height: 1.75; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { margin-top: 2em; font-size: clamp(1.5rem, 1.3rem + .8vw, 1.875rem); }
.prose h3 { margin-top: 1.6em; font-size: clamp(1.25rem, 1.15rem + .4vw, 1.375rem); }
.prose h2 + *, .prose h3 + * { margin-top: .6em; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: .4em; }
.prose li::marker { color: var(--link); }
.prose blockquote { margin-inline: 0; padding: var(--space-4) var(--space-5); border-left: 3px solid var(--accent); border-radius: 0 var(--radius-md) var(--radius-md) 0; background: var(--surface); font-size: 1.1875rem; line-height: 1.6; }
.prose blockquote cite { display: block; margin-top: var(--space-2); font-size: .875rem; font-style: normal; color: var(--text-subtle); }
.prose figure { margin-inline: 0; }
.prose figure:not(.wp-block-image) img { width: 100%; border-radius: var(--radius-md); aspect-ratio: 16 / 9; object-fit: cover; }
.prose figcaption { margin-top: var(--space-2); font-size: .875rem; color: var(--text-subtle); }
/* Filmy YouTube we wpisach (inc/video.php): miniatura z przyciskiem, odtwarzacz po kliknięciu. Shorty pionowo. */
.video-embed__link, .video-embed__frame { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius-md); overflow: hidden; background: #000; }
.video-embed--short { max-width: 360px; }
.video-embed--short .video-embed__link, .video-embed--short .video-embed__frame { aspect-ratio: 9 / 16; }
.prose .video-embed .video-embed__thumb { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; border-radius: 0; }
.video-embed__play { position: absolute; inset: 50% auto auto 50%; display: grid; place-items: center; width: 68px; height: 48px; transform: translate(-50%, -50%); border-radius: var(--radius-sm); background: rgba(0, 0, 0, .72); color: #fff; transition: background-color .15s ease; }
.video-embed__link:hover .video-embed__play, .video-embed__link:focus-visible .video-embed__play { background: #f00; }
@media (prefers-reduced-motion: reduce) { .video-embed__play { transition: none; } }

/* Zwiastuny na karcie anime (components/anime-trailers.php) i przycisk na grafice w nagłówku. */
.tt-art__play { position: absolute; right: var(--space-4); bottom: var(--space-3); display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: var(--radius-pill); background: rgba(14, 14, 17, .72); color: #fff; text-decoration: none; backdrop-filter: blur(6px); transition: background-color .15s ease, translate .15s ease; }
.tt-art__play:hover, .tt-art__play:focus-visible { background: rgba(14, 14, 17, .9); color: #fff; translate: 0 -1px; }
.tt-art__play-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--mp-granat); }
.tt-art__play-text { display: grid; line-height: 1.15; }
.tt-art__play-text strong { font-size: .9375rem; }
.tt-art__play-text small { font-size: .75rem; opacity: .75; }
.tt-art.is-playing { background: #000; }
/* Grafika pod ramką odtwarzacza: ukryta, bo przy ułamkowej szerokości jej skrawek prześwitywał przy krawędzi. */
.tt-art.is-playing img, .tt-art.is-playing .tt-art__label { visibility: hidden; }
.tt-art__play[hidden] { display: none; }
.tt-art iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.trailers { display: grid; gap: var(--space-4); }
.trailers__stage { margin: 0; }
.trailers__player, .trailers__frame { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border: 0; border-radius: var(--radius-lg); background: #000; }
.trailers__player[hidden] { display: none; }
.trailers__player img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.trailers__player::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .35)); pointer-events: none; }
.trailers__play { position: absolute; inset: 50% auto auto 50%; z-index: 1; display: grid; place-items: center; width: 76px; height: 76px; padding-left: 4px; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--mp-granat); box-shadow: 0 6px 24px rgba(0, 0, 0, .35); transition: transform .15s ease; }
.trailers__player:hover .trailers__play, .trailers__player:focus-visible .trailers__play { transform: translate(-50%, -50%) scale(1.08); }
.trailers__caption { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px var(--space-3); margin-top: var(--space-3); }
.trailers__caption span { color: var(--text-muted); font-size: .875rem; }
.trailers__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.trailer-thumb { display: grid; gap: 6px; color: inherit; text-decoration: none; }
.trailer-thumb__img { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-md); outline: 2px solid transparent; outline-offset: 2px; background: var(--surface-2); }
.trailer-thumb__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s ease; }
.trailer-thumb:hover img { transform: scale(1.04); }
.trailer-thumb[aria-current="true"] .trailer-thumb__img { outline-color: var(--accent); }
.trailer-thumb__dur { position: absolute; right: 6px; bottom: 6px; padding: 1px 6px; border-radius: 4px; background: rgba(0, 0, 0, .78); color: #fff; font-size: .75rem; font-variant-numeric: tabular-nums; }
.trailer-thumb__text { display: grid; line-height: 1.3; }
.trailer-thumb__kind { font-size: .875rem; font-weight: 600; }
.trailer-thumb__ch { color: var(--text-muted); font-size: .8125rem; }
.trailers__note { margin: 0; color: var(--text-subtle); font-size: .8125rem; }
@media (max-width: 768px) {
  .tt-art__play { right: auto; bottom: auto; left: 50%; top: 50%; translate: -50% -50%; padding: 6px 12px 6px 6px; }
  .tt-art__play:hover, .tt-art__play:focus-visible { translate: -50% -50%; }
  .tt-art__play-icon { width: 32px; height: 32px; }
  .trailers__list { position: relative; display: flex; margin-inline: calc(-1 * var(--space-4)); padding-inline: var(--space-4); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--space-4); scrollbar-width: none; }
  .trailers__list li { flex: 0 0 62%; scroll-snap-align: start; }
  .trailers__play { width: 60px; height: 60px; }
}
@media (prefers-reduced-motion: reduce) { .tt-art__play, .trailers__play, .trailer-thumb__img img { transition: none; } }
.prose sup a { text-decoration: none; font-weight: 700; font-size: .8em; padding-inline: 1px; }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: .9375rem; line-height: 1.5; }
th, td { text-align: left; vertical-align: top; padding: 12px 16px; border-bottom: 1px solid var(--border); }
thead th { font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-subtle); background: var(--surface-2); white-space: nowrap; }
tbody tr:last-child > * { border-bottom: 0; }
tbody th { font-weight: 700; }
.table-wrap table { min-width: 560px; }

.takeaways { padding: var(--space-5); border-radius: var(--radius-lg); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, var(--surface)), var(--surface)); border: 1px solid var(--border); }
.takeaways h2 { font-size: 1.125rem; letter-spacing: -.01em; margin: 0 0 var(--space-3); }
.takeaways ul { margin: 0; padding-left: 1.25em; display: grid; gap: var(--space-2); }
.takeaways li::marker { color: var(--link); }

.byline { display: flex; align-items: center; gap: var(--space-3); }
.avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; background: linear-gradient(135deg, var(--mp-kobalt-500), var(--mp-kobalt)); color: var(--mp-biel); font-weight: 700; font-size: .9375rem; }
.avatar--lg { width: 64px; height: 64px; font-size: 1.25rem; }
.byline__name { font-weight: 700; }
.byline__meta { font-size: .875rem; color: var(--text-subtle); }
.author-box { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-4); padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.author-box p { font-size: .9375rem; color: var(--text-muted); margin-top: 4px; }
/* „Porozmawiaj o tym”: dyskusja na X i Discordzie zamiast komentarzy na stronie. */
.discussion { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-5); padding: var(--space-5); border-radius: var(--radius-lg); background: var(--surface-2); }
.discussion h2 { font-size: 1.0625rem; font-weight: 700; }
.discussion p { font-size: .9375rem; color: var(--text-muted); margin-top: 4px; text-wrap: pretty; }
.discussion__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* Rząd przewijany w poziomie (jak w serwisach VOD); pod spodem zwykła lista linków. */
.rail { position: relative; }
.rail__track {
  list-style: none; margin: 0; padding: 4px var(--gutter) var(--space-4); display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * var(--gutter) - 1.4 * var(--space-4)) / 2.4); gap: var(--space-4);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  scrollbar-width: none; margin-inline: calc(-1 * var(--gutter));
}
.rail__track::-webkit-scrollbar { display: none; }
.rail__track > li { scroll-snap-align: start; min-width: 0; padding-top: 6px; }
@media (min-width: 640px) { .rail__track { grid-auto-columns: calc((100% - 2 * var(--gutter) - 3.4 * var(--space-4)) / 4.4); } }
@media (min-width: 1024px) { .rail__track { grid-auto-columns: calc((100% - 2 * var(--gutter) - 5 * var(--space-5)) / 6); gap: var(--space-5); } }
.rail-controls { display: none; gap: var(--space-2); }
.js .rail-controls { display: flex; }
/* Na ekranach dotykowych karuzelę przewija się palcem; strzałki zabierałyby miejsce. */
@media (max-width: 639.98px), (hover: none) { .js .rail-controls { display: none; } }
.rail-controls button { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); }
.rail-controls button:hover:not(:disabled) { border-color: var(--link); color: var(--link); }
.rail-controls button:disabled { opacity: .35; cursor: default; }
.rail-controls svg { width: 18px; height: 18px; }

/* Stopka */
.site-footer { background: var(--footer-bg); color: var(--mp-biel); padding-block: var(--space-8) var(--space-6); position: relative; overflow: hidden; isolation: isolate; border-top: 1px solid rgba(255, 255, 255, .07); }
.site-footer a:not(.btn) { color: var(--mp-biel); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer__grid { display: grid; gap: var(--space-6); }
.site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-5); }
.site-footer__about { grid-column: 1 / -1; }
@media (min-width: 768px) { .site-footer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .site-footer__grid { grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr)); } .site-footer__about { grid-column: auto; } }
.site-footer nav a:not(.btn) { color: #E0CFC9; font-size: .9375rem; }
.site-footer nav a:not(.btn):hover { color: var(--mp-biel); }
.site-footer__about p { color: var(--mp-mgla); max-width: 38ch; margin-top: var(--space-4); font-size: .9375rem; }
.site-footer h2 { font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mp-mgla); margin-bottom: var(--space-3); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.site-footer__pending { color: var(--mp-mgla); }
.site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid rgba(255, 255, 255, .08); font-size: .875rem; color: var(--mp-mgla); }

/* 5. Widoki ---------------------------------------------------------------- */

/* Mozaika okładek w tle (panel logowania). */
.mosaic {
  position: absolute; z-index: -2; top: -12%; right: -14%; width: min(980px, 95vw);
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px;
  rotate: -10deg; opacity: .5;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%), linear-gradient(180deg, #000 60%, transparent);
  mask-image: linear-gradient(90deg, transparent 0%, #000 45%);
}
.mosaic img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 12px; }
.mosaic > :nth-child(5n + 2), .mosaic > :nth-child(5n + 4) { translate: 0 -38%; }
@media (max-width: 767.98px) { .mosaic { width: 160vw; right: -70%; top: -6%; opacity: .28; } }

/* Strona główna, hero (wzorzec IMDb): duża pozioma grafika aktywnego tytułu zanikająca w tło, okładka nachodząca
   na jej dół, obok „Dalej w tym sezonie”. Tło sekcji: czerń, rozmyta grafika i kobaltowa poświata. */
.hp-feat { position: relative; overflow: hidden; isolation: isolate; background: var(--mp-czern); color: var(--mp-biel); padding-block: var(--space-7) var(--space-8); }
.hp-feat__glow { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.hp-feat__glow img { position: absolute; inset: -10%; width: 120%; height: 120%; object-fit: cover; filter: blur(70px) saturate(1.5); opacity: .5; }
.hp-feat::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 70% at 0% 0%, rgba(194, 74, 46, .16), transparent 70%), linear-gradient(180deg, rgba(14, 14, 17, .35), rgba(14, 14, 17, .7) 55%, var(--mp-czern)); }
.hp-feat__grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: var(--space-5); align-items: start; }
.hp-feat__main { position: relative; }
.hp-feat__grid--solo { grid-template-columns: minmax(0, 1fr); max-width: 1000px; }
.hp-feat__slide[hidden] { display: none; }
/* Grafika zanika w tło (maska), więc tytuł i okładka wchodzą na nią bez twardej krawędzi. */
.hp-feat__media { position: relative; overflow: hidden; border-radius: 14px 14px 0 0; aspect-ratio: 16 / 8.6; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, rgba(0, 0, 0, .55) 74%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 52%, rgba(0, 0, 0, .55) 74%, transparent 100%); }
.hp-feat__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hp-feat__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(14, 14, 17, .35) 0%, transparent 45%); }
.hp-feat__info { position: relative; display: grid; grid-template-columns: 170px auto minmax(0, 1fr); gap: var(--space-5); align-items: end; margin: -150px var(--space-5) 0; }
.hp-feat__poster { position: relative; border-radius: 10px; overflow: hidden; box-shadow: 0 24px 40px -18px rgba(0, 0, 0, .9); }
.hp-feat__poster img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; }
/* „+”: przycisk listy (list-button). Bez logowania prowadzi do logowania, po zalogowaniu otwiera okno listy. */
/* „+” na okładce (przycisk listy, wzorzec IMDb): bez logowania prowadzi do logowania, po zalogowaniu otwiera okno listy. */
.list-add { position: absolute; z-index: 4; left: 0; top: 0; display: grid; place-items: center; width: 32px; height: 38px; border-radius: var(--radius-md) 0 6px 0; background: rgba(14, 14, 17, .72); color: var(--mp-biel); text-decoration: none; transition: background .15s; }
.list-add svg { width: 18px; height: 18px; }
.list-add:hover, .list-add.is-saved { background: var(--mp-kobalt-500); color: var(--mp-biel); }
.list-add .list-button__check, .list-add.is-saved .list-button__plus { display: none; }
.list-add.is-saved .list-button__check { display: block; }
.list-add:focus-visible { outline: 3px solid var(--mp-kobalt-500); outline-offset: 2px; }
.list-add--lg { width: 40px; height: 48px; border-radius: 10px 0 8px 0; }
.list-add--lg svg { width: 22px; height: 22px; }
.list-add--sm { width: 22px; height: 26px; border-radius: 6px 0 5px 0; }
.list-add--sm svg { width: 14px; height: 14px; }
.hp-feat__play { display: grid; place-items: center; width: 76px; height: 76px; margin-bottom: 6px; border: 3px solid var(--mp-biel); border-radius: 50%; color: var(--mp-biel); transition: background .15s, color .15s, transform .15s; }
.hp-feat__play svg { width: 30px; height: 30px; translate: 2px 0; }
.hp-feat__play:hover { background: var(--mp-biel); color: var(--mp-czern); transform: scale(1.05); }
.hp-feat__text { display: grid; gap: 4px; padding-bottom: 6px; min-width: 0; }
.hp-feat__title { margin: 0; font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem); font-weight: 700; line-height: 1.05; letter-spacing: -.02em; text-wrap: balance; }
.hp-feat__title a { color: var(--mp-biel); text-decoration: none; }
.hp-feat__title a:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.hp-feat__sub { margin: 0; font-size: 1.125rem; color: rgba(255, 255, 255, .78); }
.hp-feat__sub [data-ts] ~ [data-ts] { display: none; }
.hp-feat__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin: 2px 0 0; font-size: .875rem; color: rgba(255, 255, 255, .6); }
.hp-feat__logos { display: inline-flex; align-items: center; gap: var(--space-4); }
.hp-feat__logos { --logo-h: 26px; }
.hp-feat .provider-logo--light { display: none; }
.hp-feat .provider-logo.provider-logo--dark { display: block; }
.hp-feat__arrow { position: absolute; top: 24%; display: grid; place-items: center; width: 52px; height: 76px; padding: 0; border: 1px solid rgba(255, 255, 255, .28); border-radius: 6px; background: rgba(14, 14, 17, .45); color: var(--mp-biel); cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .15s; }
.hp-feat__arrow svg { width: 26px; height: 26px; }
.hp-feat__arrow:hover { background: rgba(14, 14, 17, .75); }
.hp-feat__arrow--prev { left: 0; border-left: 0; border-radius: 0 6px 6px 0; }
.hp-feat__arrow--next { right: 0; border-right: 0; border-radius: 6px 0 0 6px; }
html:not(.js) .hp-feat__arrow { display: none; }
.hp-feat :is(.hp-feat__arrow, .hp-feat__play, .list-add):focus-visible { outline: 3px solid var(--mp-biel); outline-offset: 3px; }

.hp-next h2 { margin: 0 0 var(--space-3); font-size: 1.5rem; font-weight: 800; color: var(--mp-link-ciemny); }
.hp-next__list { display: grid; gap: var(--space-2); margin: 0; padding: var(--space-3); border-radius: 12px; background: rgba(255, 255, 255, .05); list-style: none; }
.hp-next__list > li[hidden] { display: none; }
.hp-next__list a { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: var(--space-4); align-items: center; padding: var(--space-2); border-radius: 10px; color: var(--mp-biel); text-decoration: none; transition: background .15s; }
.hp-next__list a:hover { background: rgba(255, 255, 255, .06); }
.hp-next__list img { width: 76px; height: 114px; object-fit: cover; border-radius: 8px; }
/* Termin nad tytułem, odcinek pod nim; z kilku terminów widać pierwszy jeszcze niewyemitowany (site.js usuwa minione). */
.hp-next__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hp-next__eps, .hp-next__eps > [data-ts] { display: contents; }
.hp-next__eps > [data-ts] ~ [data-ts] { display: none; }
.hp-next__when { order: 1; display: inline-flex; align-items: center; gap: var(--space-2); font-size: .875rem; font-weight: 600; color: rgba(255, 255, 255, .85); }
.hp-next__when svg { flex: none; width: 28px; height: 28px; padding: 6px 5px 6px 7px; border: 2px solid rgba(255, 255, 255, .85); border-radius: 50%; }
.hp-next__title { order: 2; font-size: 1.0625rem; font-weight: 700; line-height: 1.25; }
.hp-next__sub { order: 3; font-size: .875rem; color: rgba(255, 255, 255, .6); }
.hp-next__list a:hover .hp-next__title { text-decoration: underline; }
.hp-next__all { display: inline-flex; align-items: center; gap: 4px; margin-top: var(--space-4); font-weight: 800; font-size: 1.0625rem; color: var(--mp-biel); text-decoration: none; }
.hp-next__all svg { width: 18px; height: 18px; }
.hp-next__all:hover { text-decoration: underline; }
@media (max-width: 1023.98px) {
  .hp-feat__grid { grid-template-columns: minmax(0, 1fr); }
  .hp-next__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hp-next__list a { grid-template-columns: 1fr; }
  .hp-next__list img { width: 100%; height: auto; aspect-ratio: 2 / 3; }
}
@media (max-width: 599.98px) {
  .hp-feat { padding-block: 0 var(--space-6); }
  .hp-feat__media { aspect-ratio: 16 / 10; border-radius: 0; margin-inline: calc(var(--gutter) * -1); }
  .hp-feat__logos { --logo-h: 21px; }
  .hp-feat__info { grid-template-columns: 96px minmax(0, 1fr); margin: -60px 0 0; gap: var(--space-4); }
  .hp-feat__play { display: none; }
  .hp-feat__title { font-size: 1.5rem; }
  .hp-feat__sub { font-size: .9375rem; }
  .hp-feat__arrow { top: 18%; width: 40px; height: 56px; }
  .hp-feat__arrow--prev { left: calc(var(--gutter) * -1); }
  .hp-feat__arrow--next { right: calc(var(--gutter) * -1); }
  .hp-next__list { grid-template-columns: minmax(0, 1fr); }
  .hp-next__list a { grid-template-columns: 64px minmax(0, 1fr); }
  .hp-next__list img { width: 64px; height: 96px; }
}

/* Popularne (wzorzec Crunchyroll News „Editor's Picks”): pas w ciemnym kobalcie, w tle duże łopatki sygnetu. */
.hp-picks { position: relative; overflow: hidden; isolation: isolate; background: color-mix(in srgb, var(--mp-kobalt) 38%, var(--mp-granat)); color: var(--mp-biel); padding-block: var(--space-8); }
.hp-picks__blades { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.hp-blade { fill: var(--mp-kobalt); opacity: .55; }
.hp-blade--light { fill: var(--mp-kobalt-500); opacity: .4; }
[data-theme="dark"] .hp-picks { background: color-mix(in srgb, var(--mp-kobalt) 30%, var(--mp-czern)); }
[data-theme="dark"] .hp-blade { fill: color-mix(in srgb, var(--mp-kobalt) 60%, var(--mp-czern)); }
[data-theme="dark"] .hp-blade--light { fill: color-mix(in srgb, var(--mp-kobalt-500) 70%, var(--mp-czern)); }
.hp-picks__head { margin-bottom: var(--space-6); }
.hp-picks__head h2 { margin: 0; font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); font-weight: 700; letter-spacing: -.02em; color: var(--mp-biel); }
.hp-picks__head p { margin: var(--space-2) 0 0; color: rgba(255, 255, 255, .82); text-wrap: pretty; }
.hp-picks__more { display: inline-flex; align-items: center; gap: 4px; margin-top: var(--space-3); color: var(--mp-biel); font-weight: 700; text-decoration: none; }
.hp-picks__more svg { width: 16px; height: 16px; }
.hp-picks__more:hover { text-decoration: underline; }
/* Okładki w tym samym rozmiarze co w rzędach premier i „Nowych w katalogu” (te same kolumny na każdej szerokości). */
.hp-picks__list { display: grid; grid-template-columns: repeat(6, calc((100% - 2 * var(--gutter) - 5 * var(--space-5)) / 6)); align-items: stretch; gap: var(--space-5); margin: 0; padding: 0; list-style: none; }
/* Przyciski w jednej linii: tytuł zajmuje elastyczny wiersz, przycisk zawsze na dole karty. */
.hp-pick { display: grid; grid-template-rows: auto 1fr auto; gap: var(--space-3); }
.hp-pick__poster { position: relative; display: block; border-radius: var(--radius-md); overflow: hidden; box-shadow: 0 24px 40px -22px rgba(4, 10, 50, .8); transition: transform .25s; }
.hp-pick__poster:hover { transform: translateY(-4px); }
.hp-pick__poster img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; }
.hp-pick__rank { position: absolute; left: 8px; top: 8px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--mp-biel); color: var(--mp-granat); font-weight: 800; font-size: 1rem; }
.hp-pick__title { margin: var(--space-1) 0 0; font-size: 1rem; line-height: 1.3; font-weight: 700; letter-spacing: -.01em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.hp-pick__title a { color: var(--mp-biel); text-decoration: none; }
.hp-pick__title a:hover { text-decoration: underline; }
.hp-pick__btn { align-self: end; justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin-top: var(--space-1); padding: 6px 14px; border: 1.5px solid var(--mp-biel); border-radius: var(--radius-pill); color: var(--mp-biel); font-weight: 700; font-size: .875rem; text-decoration: none; transition: background .15s, color .15s; }
.hp-pick__btn svg { width: 14px; height: 14px; }
.hp-pick__btn:hover { background: var(--mp-biel); color: var(--mp-kobalt); }
[data-theme="dark"] .hp-pick__btn:hover { color: var(--mp-czern); }
/* Pasek przewijania pod rzędem (telefon i tablet): pokazuje, że rząd się przesuwa i gdzie jesteśmy. */
.hp-scrollbar { display: none; position: relative; height: 4px; margin-top: var(--space-5); border-radius: 2px; background: rgba(255, 255, 255, .2); overflow: hidden; }
.hp-scrollbar span { position: absolute; top: 0; bottom: 0; left: 0; width: 30%; border-radius: 2px; background: var(--mp-biel); transition: left .1s linear; }
@media (max-width: 1023.98px) {
  .hp-picks__list { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * var(--gutter) - 3.4 * var(--space-4)) / 4.4); gap: var(--space-4); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  .hp-picks__list::-webkit-scrollbar { display: none; }
  .js .hp-picks .hp-scrollbar { display: block; }
  .hp-pick { scroll-snap-align: start; }
}
@media (max-width: 599.98px) {
  .hp-picks { padding-block: var(--space-7); }
  .hp-picks__list { grid-auto-columns: calc((100% - 2 * var(--gutter) - 1.4 * var(--space-4)) / 2.4); }
  .hp-pick__btn { padding: 5px 10px; font-size: .8125rem; }
  .hp-pick__btn svg { display: none; }
}
@media (prefers-reduced-motion: reduce) { .hp-pick__poster, .hp-feat__play { transition: none; } }
.mini-card { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--space-4); align-items: center; padding-block: var(--space-3); border-bottom: 1px solid var(--border); }
.mini-card:last-child { border-bottom: 0; }
.mini-card:hover .mini-card__title a { color: var(--link); }
.mini-card .poster { border-radius: 8px; box-shadow: none; }
.mini-card__title { font-size: 1rem; font-weight: 700; line-height: 1.3; letter-spacing: -.005em; }
.mini-card__title a { color: var(--text); text-decoration: none; }
.mini-card__title a::after { content: ""; position: absolute; inset: 0; }
.mini-card__meta { font-size: .8125rem; color: var(--text-subtle); }

/* Premiery sezonu: rząd plakatów z datą (wzór z serwisów filmowych), bez boksów i osi czasu.
   Kolejne daty pokazujemy nad pierwszą premierą danego dnia; „Dziś” to cienka linia w rzędzie. */
.premieres { list-style: none; margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter) var(--space-3); display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * var(--gutter) - 1.4 * var(--space-4)) / 2.4); gap: var(--space-5) var(--space-4); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
.premieres::-webkit-scrollbar { display: none; }
@media (min-width: 640px) { .premieres { grid-auto-columns: calc((100% - 2 * var(--gutter) - 3.4 * var(--space-4)) / 4.4); } }
@media (min-width: 1024px) { .premieres { grid-auto-columns: calc((100% - 2 * var(--gutter) - 5 * var(--space-5)) / 6); gap: var(--space-5); } }
.premiere { position: relative; scroll-snap-align: start; display: grid; gap: 10px; align-content: start; min-width: 0; }
.premiere__date { display: flex; align-items: baseline; gap: 8px; min-height: 28px; padding-bottom: 6px; border-bottom: 2px solid var(--border); font-variant-numeric: tabular-nums; }
.premiere__date strong { font-size: 1.125rem; font-weight: 800; letter-spacing: -.01em; }
.premiere__date span { font-size: .8125rem; color: var(--text-subtle); }
.premiere__date strong { white-space: nowrap; }
/* Wąskie kolumny na telefonie: dzień tygodnia pod datą, równa wysokość nagłówków. */
@media (max-width: 639.98px) { .premiere__date { flex-direction: column; align-items: flex-start; gap: 0; min-height: 44px; } }
.premiere__date--same { border-bottom-color: var(--border); }
.premiere__date--same > * { visibility: hidden; }
.premiere--past .premiere__date { border-bottom-color: var(--season-graphic); }
.premiere .poster { transition: translate .3s var(--ease), box-shadow .3s var(--ease); }
.premiere:hover .poster { translate: 0 -3px; box-shadow: 0 0 0 2px var(--mp-kobalt-500), var(--poster-shadow); }
.premiere__title { font-weight: 700; font-size: .9375rem; line-height: 1.35; }
.premiere__title a { color: var(--text); text-decoration: none; }
.premiere__title a::after { content: ""; position: absolute; inset: 0; }
.premiere:hover .premiere__title a { color: var(--link); }
.premiere__meta { font-size: .8125rem; color: var(--text-subtle); margin-top: -6px; }
.premiere-today { scroll-snap-align: start; display: grid; align-content: start; gap: 10px; min-width: 0; }
.premiere-today .premiere__date { border-bottom-color: var(--text); }
.premiere-today .premiere__date strong { color: var(--text); }
.premiere-today p:last-child { color: var(--text-muted); font-size: .875rem; }
.premiere-more { display: grid; align-content: start; gap: 10px; }
.premiere-more .poster-slot { aspect-ratio: 2 / 3; border-radius: var(--radius-md); border: 1.5px dashed var(--border-strong); display: grid; place-items: center; padding: var(--space-4); text-align: center; color: var(--text-muted); font-size: .875rem; }

.season-band { position: relative; overflow: hidden; isolation: isolate; }
.season-band__mark { width: 44px; height: 44px; flex: none; }
.season-head { display: flex; gap: var(--space-4); align-items: center; }

.trust { display: grid; gap: var(--space-4); }
@media (min-width: 768px) { .trust { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.trust__item { display: grid; gap: var(--space-2); padding: var(--space-5); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); }
.trust__item svg { width: 36px; height: 36px; margin-bottom: var(--space-2); }
.trust__item h3 { font-size: 1.125rem; }
.trust__item p { color: var(--text-muted); font-size: .9375rem; }

/* „Sprawdzamy na bieżąco”: zasady + dziennik ostatnich weryfikacji (dowód zamiast deklaracji). */
.verify { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 1024px) { .verify { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: var(--space-8); } }
.verify h2 { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem); line-height: 1.05; letter-spacing: -.03em; }
.verify--benefits > .principles { margin-top: 0; }
.verify__cta { margin-top: var(--space-5); }
.verify__lead { color: var(--text-muted); font-size: 1.0625rem; margin-top: var(--space-4); max-width: 46ch; text-wrap: pretty; }
/* Zasady jak kroki: numer w podbarwionym kółku, kółka połączone cienką linią. */
.principles { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; counter-reset: pr; }
.principles li { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-4); padding-bottom: var(--space-5); counter-increment: pr; }
.principles li:last-child { padding-bottom: 0; }
.principles li::before { content: "0" counter(pr); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: color-mix(in srgb, var(--link) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--link) 35%, transparent); font-size: .8125rem; font-weight: 800; letter-spacing: .02em; color: var(--link); font-variant-numeric: tabular-nums; }
.principles li:not(:last-child)::after { content: ""; position: absolute; left: 19.5px; top: 48px; bottom: 8px; width: 1px; background: color-mix(in srgb, var(--link) 35%, transparent); }
.principles li > div { padding-top: 8px; }
.principles strong { display: block; margin-bottom: 2px; font-size: 1.0625rem; }
.principles span { display: block; color: var(--text-muted); font-size: .9375rem; text-wrap: balance; }
/* Ostatnio aktualizowane karty: tabela na tle sekcji, wiersze oddzielone linią. Na telefonie kategoria pod tytułem. */
.log-table table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.log-table th { padding: 0 var(--space-3) var(--space-2) 0; border-bottom: 1px solid var(--border-strong); font-size: .8125rem; font-weight: 600; color: var(--text-muted); text-align: left; text-transform: none; letter-spacing: 0; }
.log-table td { padding: 13px var(--space-3) 13px 0; border-bottom: 1px solid var(--border); color: var(--text-muted); vertical-align: middle; }
.log-table tr:last-child td { border-bottom: 0; }
.log-table th:last-child, .log-table td:last-child { padding-right: 0; text-align: right; white-space: nowrap; }
.log-table__title { display: flex; align-items: center; gap: var(--space-3); font-weight: 700; color: var(--text); text-decoration: none; }
.log-table__title:hover { color: var(--link); text-decoration: underline; }
.log-table__title img { flex: none; width: 36px; height: 54px; object-fit: cover; border-radius: 4px; }
.log-table__kind { display: none; }
@media (max-width: 599.98px) {
  .log-table__cat { display: none; }
  .log-table__name { display: block; line-height: 1.3; }
  .log-table__kind { display: block; margin-top: 2px; font-size: .8125rem; font-weight: 400; color: var(--text-muted); }
}

/* Karta anime — nagłówek immersyjny z tłem z okładki */
.title-hero { position: relative; overflow: hidden; isolation: isolate; background: var(--mp-czern); }
.title-hero__backdrop { position: absolute; inset: -60px; z-index: -2; background-size: cover; background-position: center 25%; filter: blur(44px) saturate(1.7); opacity: .95; scale: 1.1; }
.title-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(180deg, rgba(14, 14, 17, .15) 0%, rgba(14, 14, 17, .6) 60%, var(--mp-czern) 100%),
  linear-gradient(90deg, rgba(14, 14, 17, .55), transparent 75%); }
/* Nagłówek karty według IMDb: tytuł i dane w jednej linii, obok popularność i nowy odcinek; okładka z „+” i grafika
   promocyjna tej samej wysokości; pod spodem gatunki, krótki opis i fakty, po prawej gdzie obejrzeć i lista. */
.tt-hero { color: var(--mp-biel); padding-block: var(--space-5) var(--space-7); }
.tt-hero .breadcrumbs { margin-bottom: var(--space-4); }
.tt-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3) var(--space-6); align-items: end; margin-bottom: var(--space-4); }
.tt-hero .tt-top h1 { margin: 0; color: var(--mp-biel); font-size: clamp(2rem, 1.4rem + 2vw, 3.25rem); line-height: 1.05; letter-spacing: -.025em; }
.tt-hero .tt-top h1.is-long { font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.25rem); }
.tt-alt { margin: 6px 0 0; color: rgba(255, 255, 255, .6); font-size: .9375rem; overflow-wrap: anywhere; }
.tt-meta { display: flex; flex-wrap: wrap; gap: 0 8px; margin: var(--space-2) 0 0; color: rgba(255, 255, 255, .75); }
.tt-meta > * + *::before { content: "·"; margin-right: 8px; color: rgba(255, 255, 255, .45); }
.tt-stats { display: flex; gap: var(--space-6); }
.tt-stat { display: grid; gap: 4px; justify-items: center; text-align: center; }
.tt-stat[hidden] { display: none; }
.tt-stat__label { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .62); }
.tt-stat__value { display: inline-flex; align-items: baseline; gap: 6px; font-size: 1.25rem; font-weight: 800; color: var(--mp-biel); text-decoration: none; }
.tt-stat__value small { font-size: .8125rem; font-weight: 600; color: var(--mp-link-ciemny); }
a.tt-stat__value:hover small { text-decoration: underline; }
.tt-stat [data-ts] ~ [data-ts], .tt-facts [data-ts] ~ [data-ts] { display: none; }
.tt-media { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: 6px; align-items: start; }
.tt-poster { position: relative; }
.tt-poster .poster { border-radius: 10px 0 0 10px; box-shadow: none; }
.tt-art { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 0 10px 10px 0; background: var(--mp-granat); }
.tt-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tt-art__label { position: absolute; left: var(--space-4); bottom: var(--space-3); padding: 4px 10px; border-radius: 6px; background: rgba(14, 14, 17, .6); color: rgba(255, 255, 255, .85); font-size: .75rem; }
.tt-under { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-7); margin-top: var(--space-5); }
/* Bez grafiki: okładka po lewej, reszta obok. */
.tt-body:not(.tt-body--art) { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--space-6); }
.tt-body:not(.tt-body--art) .tt-media { display: block; }
.tt-body:not(.tt-body--art) .tt-poster .poster { border-radius: 10px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .85); }
.tt-body:not(.tt-body--art) .tt-under { margin-top: 0; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-6); }
.tt-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--space-4); padding: 0; list-style: none; }
.tt-pills a { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, .35); border-radius: var(--radius-pill); color: var(--mp-biel); font-size: .875rem; font-weight: 600; text-decoration: none; }
.tt-pills a:hover { border-color: var(--mp-biel); }
.tt-summary { margin: 0 0 var(--space-4); color: rgba(255, 255, 255, .88); font-size: 1.0625rem; line-height: 1.6; max-width: 70ch; }
.tt-summary a, .tt-facts a, .tt-side__value a { color: var(--mp-link-ciemny); }
.tt-facts { margin: 0; }
.tt-facts > div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: var(--space-4); padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, .14); }
.tt-facts > div[hidden] { display: none; }
.tt-facts dt { font-weight: 700; color: var(--mp-biel); }
.tt-facts dd { margin: 0; color: rgba(255, 255, 255, .78); }
.tt-facts small { color: rgba(255, 255, 255, .55); }
.tt-side { display: grid; align-content: start; gap: var(--space-4); }
.tt-side__label { margin: 0 0 8px; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mp-link-ciemny); }
.tt-side__value { margin: 0; color: var(--mp-biel); }
.tt-providers { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tt-provider { display: grid; place-items: center; height: 44px; min-width: 110px; padding: 0 14px; border-radius: 8px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); --logo-h: 22px; }
.tt-provider:hover { border-color: rgba(255, 255, 255, .4); }
.tt-provider .provider-logo--light { display: none; }
.tt-provider .provider-logo.provider-logo--dark { display: block; }
.tt-list-btn { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 2px 12px; align-items: center; padding: 12px 18px; border-radius: 12px; background: var(--mp-kobalt-500); color: var(--mp-biel); text-decoration: none; }
.tt-list-btn svg { grid-row: span 2; width: 22px; height: 22px; }
.tt-list-btn strong { font-size: 1rem; }
.tt-list-btn span { font-size: .8125rem; color: rgba(255, 255, 255, .8); }
.tt-list-btn:hover { background: var(--mp-kobalt); color: var(--mp-biel); }
.tt-list-btn .list-button__check, .tt-list-btn.is-saved .list-button__plus { display: none; }
.tt-list-btn.is-saved .list-button__check { display: block; }
.tt-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 11px 18px; border-radius: 12px; background: rgba(255, 255, 255, .08); color: var(--mp-biel); font-weight: 700; text-decoration: none; }
.tt-ghost:hover { background: rgba(255, 255, 255, .14); }
.tt-checked { margin: 0; font-size: .8125rem; color: rgba(255, 255, 255, .55); }
/* Prawa kolumna karty bez ramki: same wiersze faktów, jak na IMDb. */
.title-body .aside-stack .panel { border: 0; background: none; box-shadow: none; padding: 0; }
@media (max-width: 1023.98px) {
  .tt-under, .tt-body:not(.tt-body--art) .tt-under { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
}
@media (max-width: 767.98px) {
  .tt-top { grid-template-columns: minmax(0, 1fr); }
  .tt-stats { gap: var(--space-5); }
  .tt-stat { justify-items: start; text-align: left; }
  .tt-art__label { display: none; }
  .tt-poster .list-add--lg { width: 30px; height: 36px; border-radius: 8px 0 6px 0; }
  .tt-poster .list-add--lg svg { width: 18px; height: 18px; }
  .tt-body:not(.tt-body--art) { display: block; }
  .tt-body:not(.tt-body--art) .tt-poster { width: 140px; margin-bottom: var(--space-4); }
  .tt-facts > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

.title-hero h1 { font-size: clamp(2.25rem, 1.5rem + 3vw, 3.75rem); line-height: 1.02; letter-spacing: -.035em; overflow-wrap: anywhere; hyphens: auto; }
.title-hero h1.is-long { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem); line-height: 1.1; }

/* Kompaktowy pasek tytułu po przewinięciu nagłówka karty */
.title-bar {
  position: fixed; z-index: 45; left: 0; right: 0; top: 0;
  background: var(--header-bg); border-bottom: 1px solid var(--border);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  translate: 0 -110%; color: var(--mp-biel);
  /* Ukryty pasek jest też niewidoczny: przy pasku konkursu nad nagłówkiem wystawałby nad nagłówek. */
  visibility: hidden; transition: translate .35s var(--ease), visibility 0s linear .35s;
}
:root:not([data-theme="dark"]) .title-bar { background: rgba(51, 16, 13, .94); }
.title-bar.is-visible { translate: 0 0; visibility: visible; transition: translate .35s var(--ease); }
@media (min-width: 1024px) { .title-bar { top: var(--header-h); } }
.title-bar__inner { display: flex; align-items: center; gap: var(--space-3); min-height: 60px; }
.title-bar img { width: 32px; height: 48px; object-fit: cover; border-radius: 6px; }
.title-bar strong { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.title-bar .btn--ghost { color: var(--mp-biel); border-color: rgba(255, 255, 255, .3); }
@media (max-width: 639.98px) { .title-bar .btn--ghost { display: none; } }

.title-body { padding-block: var(--space-6) var(--space-9); }
.title-section { scroll-margin-top: calc(var(--header-h) + 72px); }
.title-section + .title-section { margin-top: var(--space-8); }
.title-section > h2 { margin-bottom: var(--space-4); }
.title-section__intro { color: var(--text-muted); margin: calc(-1 * var(--space-2)) 0 var(--space-4); max-width: 64ch; }
.title-section .prose + .watch-order { margin-top: var(--space-5); }
.aside-stack { display: grid; gap: var(--space-5); align-self: stretch; align-content: start; }
.sources-footer { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); align-items: center; justify-content: space-between; margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--border); font-size: .9375rem; }

/* Artykuł */
.article-head { padding-block: var(--space-6); display: grid; gap: var(--space-4); }
.article-head h1 { font-size: clamp(2.125rem, 1.5rem + 2.6vw, 3.25rem); line-height: 1.06; letter-spacing: -.03em; overflow-wrap: break-word; max-width: 22ch; }
.article-head .lead { color: var(--text-muted); font-size: 1.1875rem; max-width: 62ch; }
.article-dates { font-size: .875rem; color: var(--text-subtle); }
.article-dates strong { color: var(--text); font-weight: 600; }
.article-hero { position: relative; overflow: hidden; aspect-ratio: 16 / 7; border-radius: var(--radius-xl); background: var(--mp-granat); isolation: isolate; }
.article-hero__backdrop { position: absolute; inset: -40px; z-index: -1; background-size: cover; background-position: center 30%; filter: blur(36px) saturate(1.4); opacity: .8; }
.article-hero img { height: 100%; width: auto; aspect-ratio: 2 / 3; object-fit: cover; margin-left: auto; margin-right: 8%; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .85); }
.article-hero figcaption { position: absolute; left: var(--space-4); bottom: var(--space-3); font-size: .75rem; color: rgba(255, 255, 255, .8); }
.article-layout { display: grid; gap: var(--space-7); padding-block: var(--space-6) var(--space-9); }
@media (min-width: 1024px) { .article-layout { grid-template-columns: minmax(0, 720px) 300px; justify-content: space-between; gap: var(--space-8); } }
.related-anime { display: grid; gap: var(--space-3); }
.related-anime .anime-card--row { grid-template-columns: 64px minmax(0, 1fr); padding: var(--space-3); gap: var(--space-3); }
.related-anime .anime-card--row .anime-card__title { font-size: 1rem; }
.related-anime .anime-card__summary { display: none; }

/* Nagłówki listingów */
.page-hero { padding-block: var(--space-4) var(--space-6); }
.page-hero h1 { font-size: clamp(2.5rem, 1.8rem + 3vw, 4rem); line-height: 1.02; letter-spacing: -.035em; }
.page-hero .lead { color: var(--text-muted); max-width: 62ch; }

/* 404 */
.error-page { padding-block: var(--space-9); display: grid; gap: var(--space-5); justify-items: start; }
.error-page__code { font-size: clamp(4rem, 3rem + 6vw, 7.5rem); font-weight: 800; line-height: .9; letter-spacing: -.05em; color: var(--link); display: flex; align-items: center; gap: .08em; }
.error-page__code svg { width: .78em; height: .78em; animation: spin 6s linear infinite; }

/* Strony informacyjne */
.info-page h1 { margin-bottom: var(--space-4); }
.info-page .prose h2 { scroll-margin-top: calc(var(--header-h) + var(--space-4)); }
.placeholder-text { padding: var(--space-4); border: 1px dashed var(--border-strong); border-radius: var(--radius-md); color: var(--text-muted); font-size: .9375rem; }

/* 6. Ruch: subtelny, wyłączany przy prefers-reduced-motion ------------------ */

@keyframes pulse { 50% { opacity: .35; } }
@keyframes spin { to { rotate: 360deg; } }
@keyframes reveal { from { opacity: 0; translate: 0 28px; } to { opacity: 1; translate: 0 0; } }
/* Bez zera krycia: nagłówek i wstęp pozostają kandydatami LCP od pierwszej klatki. */
@keyframes rise { from { opacity: .35; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
@keyframes drift { from { translate: 0 0; } to { translate: 0 -60px; } }

/* Ładowanie: śmigło (znak jednobarwny, więc obrót nie zmienia kolejności sezonów). */
.spinner { display: inline-block; width: 18px; height: 18px; animation: spin .9s linear infinite; }

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .mosaic { animation: drift 40s linear infinite alternate; }
  @supports (animation-timeline: view()) {
    .reveal { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% cover 22%; }
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Pasek sekcji pod nagłówkiem karty (jak zakładki-kotwice w serwisach filmowych); przewijany w poziomie na telefonie. */
.section-nav { border-bottom: 1px solid var(--border); background: var(--bg); }
.section-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-1); overflow-x: auto; scrollbar-width: none; }
.section-nav ul::-webkit-scrollbar { display: none; }
.section-nav a { display: block; padding: 14px 14px 12px; white-space: nowrap; font-weight: 600; font-size: .9375rem; color: var(--text-muted); text-decoration: none; border-bottom: 2px solid transparent; }
.section-nav a:hover { color: var(--text); border-bottom-color: var(--border-strong); }

/* WordPress: elementy rdzenia i bloków Gutenberga ------------------------------------------- */

.screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pagination .page-numbers.current { background: var(--text); color: var(--bg); border-color: var(--text); }
.grid--articles-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.article-list .article-card--row:first-child { border-top: 0; }
/* Obrazek wyróżniający w szerokości kolumny tekstu (720 px), bez przycinania: miniatury mają hasło przy krawędzi. */
.article-figure { margin: 0; max-width: 720px; }
.article-figure img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-lg); }
.article-figure figcaption { margin-top: var(--space-2); font-size: .875rem; color: var(--text-subtle); }
.error-page__code img { width: .78em; height: .78em; animation: spin 6s linear infinite; }
.poster:has(img) { background-image: none; }
.poster:has(img)::before { display: none; }
.title-bar img { flex: none; }

.entry-content > * + * { margin-top: 1.1em; }
.entry-content img { height: auto; border-radius: var(--radius-md); }
/* Obrazy wstawione w treść (np. kadry z anime 4:3) zachowują własne proporcje, bez przycinania do 16:9. */
.entry-content .wp-block-image img { width: 100%; height: auto; }
.entry-content figure { margin: 1.6em 0; }
.entry-content .wp-element-caption, .entry-content figcaption, .wp-caption-text { margin-top: var(--space-2); font-size: .875rem; color: var(--text-subtle); }
.entry-content .alignwide { margin-inline: calc(-1 * var(--space-6)); }
.entry-content .aligncenter { margin-inline: auto; }
.entry-content .alignleft { float: left; margin: .4em 1.4em 1em 0; max-width: 50%; }
.entry-content .alignright { float: right; margin: .4em 0 1em 1.4em; max-width: 50%; }
.entry-content .wp-block-table { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.entry-content .wp-block-table table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: .9375rem; line-height: 1.45; }
.entry-content .wp-block-table thead th { padding: 12px 16px; background: var(--accent); color: var(--on-accent); font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-align: left; border: 0; }
.entry-content .wp-block-table td { padding: 12px 16px; border: 0; border-top: 1px solid var(--border); vertical-align: top; }
.entry-content .wp-block-table tbody tr:first-child td { border-top: 0; }
.entry-content .wp-block-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--accent) 4%, var(--surface)); }
.entry-content .wp-block-table tbody tr:hover td { background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }
.entry-content .wp-block-table td:first-child { font-weight: 600; }
.entry-content .wp-block-table td:first-child a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* Tabele z 3+ kolumnami (np. arc · odcinki · czy oglądać): krótka druga kolumna (zakres odcinków) bez łamania. */
.entry-content .wp-block-table tr:has(> :nth-child(3)) > td:nth-child(2) { white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 599.98px) {
  .entry-content .wp-block-table table { min-width: 560px; font-size: .875rem; }
  .entry-content .wp-block-table thead th, .entry-content .wp-block-table td { padding: 10px 12px; }
}
/* Przewijanie tabeli w bok: widoczny pasek pod tabelą i podpowiedź z paskiem pozycji nad nią (site.js). */
.entry-content .wp-block-table { scrollbar-width: thin; scrollbar-color: var(--accent) color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.entry-content .wp-block-table::-webkit-scrollbar { height: 6px; }
.entry-content .wp-block-table::-webkit-scrollbar-track { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.entry-content .wp-block-table::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 3px; }
.entry-content .table-scroll-hint { display: none; margin: 1.6em 0 0; font-size: .8125rem; color: var(--text-subtle); }
.entry-content .table-scroll-hint.is-visible { display: flex; align-items: center; gap: var(--space-3); }
.entry-content .table-scroll-hint > span:first-child::after { content: " →"; color: var(--accent); font-weight: 700; }
.table-scroll-hint__track { position: relative; flex: 1; min-width: 48px; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--accent) 15%, var(--surface)); overflow: hidden; }
.table-scroll-hint__thumb { position: absolute; inset-block: 0; left: 0; border-radius: 2px; background: var(--accent); }
.entry-content .table-scroll-hint.is-visible + .wp-block-table { margin-top: var(--space-2); }
.entry-content .wp-block-table figcaption { padding: 0 16px 12px; }
/* Ramka „Uwaga, spoilery” (styl akapitu is-style-spoiler wybierany w edytorze). */
.entry-content .is-style-spoiler { line-height: 1.55; position: relative; padding: var(--space-4) var(--space-5) var(--space-4) calc(var(--space-5) + 32px); border: 1px solid color-mix(in srgb, var(--mp-wiosna) 60%, var(--border)); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--mp-wiosna) 14%, var(--surface)); }
.entry-content .is-style-spoiler::before { content: "!"; position: absolute; left: var(--space-4); top: var(--space-4); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #E0346F; color: #fff; font-weight: 800; font-size: .875rem; line-height: 1; }
.entry-content .is-style-spoiler strong:first-child { color: color-mix(in srgb, #E0346F 80%, var(--text)); }
/* Ocena we wpisach o fillerach (style akapitu is-style-verdict-yes / -maybe / -no): ramka z kciukiem w kolorze oceny. */
.entry-content [class*="is-style-verdict-"] { --verdict: #12A150; line-height: 1.55; position: relative; padding: var(--space-4) var(--space-5) var(--space-4) calc(var(--space-5) + 36px); border: 1px solid color-mix(in srgb, var(--verdict) 45%, var(--border)); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--verdict) 10%, var(--surface)); }
.entry-content [class*="is-style-verdict-"]::before { content: ""; position: absolute; left: var(--space-4); top: calc(var(--space-4) - 1px); width: 28px; height: 28px; border-radius: 50%; background: var(--verdict); }
.entry-content [class*="is-style-verdict-"]::after { content: ""; position: absolute; left: calc(var(--space-4) + 7px); top: calc(var(--space-4) + 6px); width: 14px; height: 14px; background: #fff; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 21h3V10H2v11zm20-10c0-1.1-.9-2-2-2h-6.3l1-4.6v-.3c0-.4-.2-.8-.4-1.1L13.2 2 6.6 8.6C6.2 9 6 9.5 6 10v9c0 1.1.9 2 2 2h9c.8 0 1.5-.5 1.8-1.2l3-7.1c.1-.2.2-.5.2-.7v-2z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 21h3V10H2v11zm20-10c0-1.1-.9-2-2-2h-6.3l1-4.6v-.3c0-.4-.2-.8-.4-1.1L13.2 2 6.6 8.6C6.2 9 6 9.5 6 10v9c0 1.1.9 2 2 2h9c.8 0 1.5-.5 1.8-1.2l3-7.1c.1-.2.2-.5.2-.7v-2z'/%3E%3C/svg%3E") center / contain no-repeat; }
.entry-content [class*="is-style-verdict-"] strong:first-child { color: color-mix(in srgb, var(--verdict) 75%, var(--text)); }
.entry-content .is-style-verdict-maybe { --verdict: var(--accent); }
.entry-content .is-style-verdict-maybe::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.5 3h3v7.5H21v3h-7.5V21h-3v-7.5H3v-3h7.5z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.5 3h3v7.5H21v3h-7.5V21h-3v-7.5H3v-3h7.5z'/%3E%3C/svg%3E"); }
.entry-content .is-style-verdict-no { --verdict: #D93A3A; }
.entry-content .is-style-verdict-no::after { rotate: 180deg; }
.entry-content .wp-block-quote { margin-inline: 0; padding: var(--space-4) var(--space-5); border-left: 3px solid var(--accent); border-radius: 0 var(--radius-md) var(--radius-md) 0; background: var(--surface); font-size: 1.1875rem; }
.entry-content .wp-block-quote cite { display: block; margin-top: var(--space-2); font-size: .875rem; font-style: normal; color: var(--text-subtle); }
.entry-content .wp-block-separator { border: 0; border-top: 1px solid var(--border); margin-block: 2em; }
.entry-content .wp-block-embed__wrapper { position: relative; }
.entry-content .wp-block-button__link { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 20px; border-radius: var(--radius-pill); background: var(--accent); color: var(--on-accent); font-weight: 600; text-decoration: none; }
.entry-content .wp-block-details, .rank-method .wp-block-details { padding: var(--space-4) var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.entry-content .wp-block-details summary, .rank-method .wp-block-details summary { font-weight: 700; cursor: pointer; }
@media (max-width: 767.98px) { .entry-content .alignleft, .entry-content .alignright { float: none; margin: 1em 0; max-width: 100%; } .entry-content .alignwide { margin-inline: 0; } }

/* Krótkie strony: stopka trzyma się dołu okna bez sztucznej wysokości treści. */
body { min-height: 100vh; display: flex; flex-direction: column; }
#tresc { flex: 1 0 auto; }

/* Artykuł bez grafiki: sam tekst, bez rozciągniętej grafiki zastępczej. */
.article-card--text.article-card--feature, .article-card--text.article-card--row { grid-template-columns: minmax(0, 1fr); }
.article-card--text.article-card--feature .article-card__title { max-width: 30ch; }

/* Bloki anime w artykułach: box pojedynczego tytułu i zestawienie. */
.entry-content .anime-embed, .anime-embed { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--space-4); align-items: start; margin: 1.8em 0; padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.anime-embed .poster { border-radius: var(--radius-sm); box-shadow: none; }
.anime-embed__body { display: grid; gap: 6px; min-width: 0; }
.entry-content .anime-embed__body > * { margin: 0; }
.anime-embed__meta { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-subtle); }
.anime-embed__title { font-size: 1.25rem; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
.anime-embed__title a { color: var(--text); text-decoration: none; }
.anime-embed__title a:hover { color: var(--link); text-decoration: underline; }
.anime-embed__summary { font-size: .9375rem; line-height: 1.55; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.anime-embed__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: 4px !important; }
/* Długie etykiety („Gdzie obejrzeć: Crunchyroll, Netflix”) zawijają się zamiast rozpychać boks na telefonie. */
.anime-embed__actions .btn { white-space: normal; max-width: 100%; }
/* Długie przyciski pod sekcjami (np. „Zobacz wszystkie premiery: jesień 2026”) mieszczą się na wąskich telefonach. */
.section-foot .btn { white-space: normal; max-width: 100%; }
.entry-content .anime-embed--featured, .anime-embed--featured { grid-template-columns: 180px minmax(0, 1fr); padding: var(--space-5); background: linear-gradient(135deg, color-mix(in srgb, var(--season-graphic) 10%, var(--surface)), var(--surface)); }
.anime-embed--featured .anime-embed__title { font-size: clamp(1.375rem, 1.2rem + .8vw, 1.75rem); }
.anime-embed--featured .anime-embed__summary { -webkit-line-clamp: 5; }
.anime-embed__facts { margin: 6px 0 !important; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.anime-embed__facts dd { font-size: 1.25rem; }
@media (max-width: 639.98px) {
  .entry-content .anime-embed--featured, .anime-embed--featured { grid-template-columns: 120px minmax(0, 1fr); }
  .anime-embed--featured .anime-embed__facts { grid-column: 1 / -1; }
}
.anime-embed-grid { margin: 2em 0; }
.anime-embed-grid__heading { margin-bottom: var(--space-4) !important; }
/* Zestawienie anime we wpisie: kompaktowe kafelki (mała okładka, tytuł i dane obok), 1 kolumna na telefonie, 2 od 560 px. */
.anime-embed-grid__items { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
@media (min-width: 560px) { .anime-embed-grid__items { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.entry-content .anime-embed-grid .mini-card, .anime-embed-grid .mini-card { display: grid; align-items: center; grid-template-columns: 72px minmax(0, 1fr); gap: var(--space-4); padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); line-height: 1.4; transition: border-color .2s; }
.anime-embed-grid .mini-card:last-child { border-bottom: 1px solid var(--border); }
.anime-embed-grid .mini-card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.entry-content .anime-embed-grid .mini-card__title { margin: 0; font-size: 1.0625rem; }
.entry-content .anime-embed-grid .mini-card__meta { margin: 4px 0 0; font-size: .875rem; line-height: 1.4; }
.entry-content .anime-embed-grid__items > * , .entry-content .anime-card > * { margin-top: 0; }
.entry-content .anime-card__body > *, .entry-content .anime-card__title, .entry-content .anime-embed__title { margin: 0; }

/* Ranking „Popularne w tym tygodniu”: duży numer obok okładki. */
.rail__track--ranked { counter-reset: rank; }
.rail__track--ranked > li { counter-increment: rank; position: relative; }
.rail__track--ranked > li::before { content: counter(rank); position: absolute; z-index: 4; left: -6px; top: -8px; min-width: 34px; height: 34px; padding: 0 6px; display: grid; place-items: center; border-radius: 10px; background: var(--text); color: var(--bg); font-weight: 800; font-size: 1.0625rem; box-shadow: 0 0 0 3px var(--bg); pointer-events: none; }
/* „Najczęściej czytane” w artykule. */
.most-read ol { list-style: none; margin: var(--space-3) 0 0; padding: 0; counter-reset: mr; display: grid; }
.most-read li { counter-increment: mr; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--space-2); padding-block: var(--space-3); border-top: 1px solid var(--border); }
.most-read li::before { content: counter(mr); font-size: 1.375rem; font-weight: 800; line-height: 1.1; color: var(--link); }
.most-read a { color: var(--text); text-decoration: none; font-weight: 600; line-height: 1.35; }
.most-read a:hover { color: var(--link); text-decoration: underline; }

/* Huby gatunków */
/* Tekst redakcji pod listami hubów: pełna szerokość kontenera (decyzja właściciela 23.10.2026). */
.hub-intro { margin-bottom: var(--space-7); }
.hub-list { margin-top: var(--space-6); }
.hub-others { margin-top: var(--space-8); padding-top: var(--space-5); border-top: 1px solid var(--border); }
.hub-others ul { list-style: none; margin: var(--space-3) 0 0; padding: 0; }
.guide-hubs { margin: 0 0 var(--space-7); }
.guide-hub .guide-hubs { margin: var(--space-8) 0 0; padding-top: var(--space-5); border-top: 1px solid var(--border); }
.guide-hubs__list { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .guide-hubs__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); } }
@media (min-width: 1100px) { .guide-hubs__list { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
/* Wysokość kafelka: co najmniej proporcja obrazu, ale rośnie z tekstem (powiększona czcionka). */
.guide-hub-tile { position: relative; display: flex; flex-direction: column; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); background: var(--mp-granat); isolation: isolate; }
.guide-hub-tile__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; border-radius: inherit; }
.guide-hub-tile__img { width: 100%; height: 100%; object-fit: cover; transition: scale .5s var(--ease); }
.guide-hub-tile::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(to top, rgba(7, 14, 58, .88) 0%, rgba(7, 14, 58, .35) 45%, rgba(7, 14, 58, 0) 70%); }
.guide-hub-tile:hover .guide-hub-tile__img { scale: 1.04; }
.guide-hub-tile__link { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; padding: var(--space-3) var(--space-4); color: #fff; text-decoration: none; }
.guide-hub-tile__link:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; border-radius: inherit; }
.guide-hub-tile__name { font-size: 1.375rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.15; }
.guide-hub-tile__meta { font-size: .875rem; opacity: .85; }
@media (max-width: 1099.98px) { .guide-hub-tile__name { font-size: 1.125rem; } }
@media (max-width: 767.98px) {
  .guide-hub-tile { aspect-ratio: 4 / 3; }
  .guide-hub-tile__link { padding: var(--space-2) var(--space-3); }
  .guide-hub-tile__name { font-size: 1rem; }
  .guide-hub-tile__meta { font-size: .75rem; }
  .guide-hub-tile__kind { display: none; }
}
.guide-hub { padding-top: var(--space-5); }
/* Nagłówek przewodnika po serii: wyśrodkowany, z opcjonalnym przygaszonym tłem zanikającym ku dołowi. */
.guide-hub-hero { position: relative; isolation: isolate; overflow: hidden; }
.guide-hub-hero__inner { padding-block: var(--space-5) var(--space-7); }
.guide-hub-hero.has-backdrop .guide-hub-hero__inner { padding-block-end: var(--space-8); }
.guide-hub-hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .6) 55%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .6) 55%, transparent 100%); }
.guide-hub-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: var(--hub-bg-position, center 60%); opacity: .22; }
[data-theme="dark"] .guide-hub-hero__bg img { opacity: .3; }
.guide-hub-hero.has-backdrop .breadcrumbs a, .guide-hub-hero.has-backdrop .breadcrumbs li { color: var(--text); }
.guide-hub-hero__credit { margin: 0; font-size: .75rem; line-height: 1.4; color: var(--text-subtle); }
.guide-hub-head { display: grid; justify-items: center; gap: var(--space-4); max-width: 760px; margin: var(--space-7) auto 0; text-align: center; }
.guide-hub-head .eyebrow { margin: 0; }
.guide-hub-head h1 { font-size: clamp(2.75rem, 1.8rem + 4vw, 4.75rem); line-height: 1; letter-spacing: -.04em; }
.guide-hub-head .lead { color: var(--text-muted); font-size: 1.1875rem; max-width: 62ch; }
.guide-hub-head__stats { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); list-style: none; margin: var(--space-2) 0 0; padding: 0; }
.guide-hub-head__stats a { display: inline-flex; gap: 6px; padding: 8px 16px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); color: var(--text); font-size: .9375rem; text-decoration: none; }
.guide-hub-head__stats a:hover { border-color: var(--link); }
.guide-hub-anime { margin-top: var(--space-8); }
.guide-hub-nav { margin-top: var(--space-7); padding: var(--space-4) var(--space-5); border-left: 3px solid var(--accent); border-radius: 0 var(--radius-md) var(--radius-md) 0; background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.guide-hub-nav ol { margin: var(--space-3) 0; padding-left: 1.25em; display: grid; gap: var(--space-2); }
.guide-hub-nav [aria-current] { font-weight: 700; }
.guide-hub-nav p { margin: var(--space-3) 0 0; font-weight: 700; }
.genre-tiles { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.genre-tile { position: relative; display: grid; gap: 4px; padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); transition: border-color .2s; }
.genre-tile:hover { border-color: var(--link); }
.genre-tile__covers { display: flex; height: 96px; margin-bottom: var(--space-3); }
.genre-tile__covers img { width: 64px; height: 96px; object-fit: cover; border-radius: 8px; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .5); }
.genre-tile__covers img + img { margin-left: -18px; }
.genre-tile__title { font-size: 1.25rem; }
.genre-tile__title a { color: var(--text); text-decoration: none; }
.genre-tile__title a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-lg); }
.genre-tile__meta { font-size: .875rem; color: var(--text-subtle); }
@media (max-width: 559.98px) {
  .genre-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .genre-tile { padding: var(--space-3); }
  .genre-tile__covers { height: 78px; }
  .genre-tile__covers img { width: 52px; height: 78px; }
  .genre-tile__covers img + img { margin-left: -16px; }
  .genre-tile__title { font-size: 1.0625rem; }
}

/* 6. Konto i prywatna lista (projekt: frontend/login.html, my-list.html) ----------------------------- */

/* Nagłówek: link „Zaloguj” (statyczny) albo menu konta (po zalogowaniu, z account.js). */
.header-account { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: var(--radius-pill); border: 1px solid rgba(255, 255, 255, .14); font-weight: 600; text-decoration: none; }
.header-account:hover { background: rgba(255, 255, 255, .08); }
.header-account svg { width: 18px; height: 18px; }
.account-menu { position: relative; }
.account-menu__toggle { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 3px 14px 3px 3px; border-radius: var(--radius-pill); border: 1px solid rgba(255, 255, 255, .14); background: transparent; color: var(--mp-biel); font-weight: 600; }
.account-menu__toggle:hover, .account-menu__toggle[aria-expanded="true"] { background: rgba(255, 255, 255, .08); }
.account-menu__toggle .avatar { width: 36px; height: 36px; font-size: .875rem; }
.account-menu__name { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu__panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 80; min-width: 200px; display: grid; padding: 6px; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }
.account-menu__panel[hidden] { display: none; }
.account-menu__panel a { padding: 10px 12px; border-radius: 8px; color: var(--text) !important; font-weight: 600; text-decoration: none; }
.account-menu__panel a:hover { background: var(--surface-2); }
@media (max-width: 767.98px) {
  .header-account { padding: 0 12px; }
  .account-menu__toggle { padding-right: 3px; }
  .account-menu__name { display: none; }
}

/* Strona logowania: mozaika okładek obok formularza. */
.auth-split { display: grid; min-height: calc(100vh - var(--header-h)); }
@media (min-width: 1024px) { .auth-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.auth-aside { position: relative; overflow: hidden; isolation: isolate; display: grid; align-content: end; gap: var(--space-4); padding: var(--space-8) var(--space-7); background: var(--mp-czern); color: var(--mp-biel); }
.auth-aside::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(14, 14, 17, .2), rgba(14, 14, 17, .95) 75%), radial-gradient(80% 60% at 0% 100%, rgba(255, 255, 255, .06), transparent); }
.auth-aside .mosaic { top: -20%; right: -30%; width: 140%; opacity: .55; -webkit-mask-image: none; mask-image: none; }
.auth-aside h2 { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); line-height: 1.05; letter-spacing: -.03em; max-width: 14ch; }
.auth-benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); color: #D0D0DA; }
.auth-benefits li { display: flex; gap: 10px; align-items: baseline; }
.auth-benefits li::before { content: ""; width: 10px; height: 10px; flex: none; border-radius: var(--blade); background: var(--mp-link-ciemny); }
@media (max-width: 1023.98px) { .auth-aside { display: none; } }
.auth-main { display: grid; place-items: center; padding: var(--space-7) var(--gutter) var(--space-9); }
.auth-card { width: min(100%, 440px); display: grid; gap: var(--space-5); }
.auth-title { font-size: clamp(1.875rem, 1.5rem + 1.4vw, 2.5rem); }
.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); }
.tabs a { display: grid; place-items: center; min-height: 42px; border-radius: 10px; color: var(--text-muted); font-weight: 700; text-decoration: none; }
.tabs a[aria-current="page"] { background: var(--surface); color: var(--text); box-shadow: 0 6px 16px -10px rgba(0, 0, 0, .6); }
.social-auth { display: grid; gap: var(--space-2); }
.social-btn { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.social-btn:hover { border-color: var(--text-muted); background: var(--surface-2); }
.social-btn svg { width: 20px; height: 20px; }
.social-btn--discord { background: #5865F2; border-color: #5865F2; color: #fff; }
.social-btn--discord:hover { background: #4752C4; border-color: #4752C4; }
.social-btn:disabled { opacity: .5; cursor: not-allowed; }
.divider { display: flex; align-items: center; gap: var(--space-3); font-size: .8125rem; color: var(--text-subtle); }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.auth-form { display: grid; gap: var(--space-4); }
.auth-legal { font-size: .8125rem; color: var(--text-subtle); }
.notice--success { background: color-mix(in srgb, #12B76A 12%, var(--surface)); }
.notice--success svg { color: #12B76A; }
.notice p { margin: 0; }

/* Moja lista */
.my-list__head { margin-bottom: var(--space-6); }
.list-table { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.list-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--space-3) var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg); align-items: center; background: var(--surface); }
.list-row .poster { border-radius: 8px; box-shadow: none; }
.list-row__title { margin: 0; font-weight: 700; font-size: 1.0625rem; line-height: 1.35; overflow-wrap: anywhere; }
.list-row__title a { color: var(--text); text-decoration: none; }
.list-row__title a:hover { color: var(--link); text-decoration: underline; }
.list-row__meta { margin: 2px 0 0; font-size: .875rem; color: var(--text-subtle); }
.list-row__controls { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: var(--space-2); align-items: end; }
.list-row__controls label { font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-subtle); display: grid; gap: 4px; }
@media (min-width: 900px) {
  .list-row { grid-template-columns: 64px minmax(0, 1fr) 420px; }
  .list-row__controls { grid-column: auto; }
}
@media (max-width: 559.98px) {
  .list-row__controls { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .list-row__controls .btn--text { grid-column: 1 / -1; justify-self: start; }
}
.no-js .list-row__controls { display: none; }
.danger-zone { margin-top: var(--space-8); padding: var(--space-4) var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-md); }
.danger-zone summary { cursor: pointer; font-weight: 600; color: var(--text-muted); }
.danger-zone[open] summary { margin-bottom: var(--space-4); }
.btn--danger { background: transparent; color: var(--error); border-color: color-mix(in srgb, var(--error) 50%, transparent); justify-self: start; }
.btn--danger:hover { background: var(--error-bg); }

/* Karta anime: powiązane artykuły jako zwarta lista (mała miniatura + tytuł), nie duże kafle. */
.related-articles { display: grid; gap: 0 var(--space-6); }
@media (min-width: 768px) { .related-articles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.related-articles .article-card--compact { padding-block: var(--space-4); border-bottom: 1px solid var(--border); }
.related-articles .article-card--compact .article-card__media { aspect-ratio: 16 / 9; }


/* Karta anime: przycisk listy (stan zapisany po zalogowaniu). */
.list-button svg { width: 18px; height: 18px; }
.list-button.is-saved svg { fill: currentColor; }

/* 7. Katalog: poziomy pasek filtrów i gęsta siatka okładek -------------------------------------------- */
.grid--catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); }
@media (min-width: 640px) { .grid--catalog { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .grid--catalog { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .grid--catalog { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 1240px) { .grid--catalog { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-6) var(--space-5); } }
.grid--catalog .anime-card__title { font-size: 1rem; line-height: 1.3; }
/* Przełącznik siatka/lista w katalogu (wybór zapamiętany w przeglądarce). */
.view-toggle { display: inline-flex; gap: 2px; margin-left: var(--space-2); padding: 3px; border: 1px solid var(--border); border-radius: var(--radius-pill); }
.view-toggle[hidden] { display: none; }
.view-toggle button { display: grid; place-items: center; width: 34px; height: 30px; padding: 0; border: 0; border-radius: var(--radius-pill); background: none; color: var(--text-subtle); cursor: pointer; }
.view-toggle button[aria-pressed="true"] { background: var(--surface-2); color: var(--text); }
.view-toggle svg { width: 18px; height: 18px; }
/* Widok listy (katalog /anime/, wzorzec A–Z 26.10.2026): reguły w sekcji „Katalogi słownikowe A–Z” na końcu pliku. */

.catalog-filters { margin-bottom: var(--space-4); }
.catalog-filters__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.catalog-filters__title { flex: 1 1 240px; max-width: 340px; }
.catalog-filters__title input { min-height: 44px; padding-right: 16px; }
.filter-drop { position: relative; }
.filter-drop > summary {
  list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 18px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--surface); color: var(--text);
  font-weight: 600; cursor: pointer; user-select: none; white-space: nowrap;
}
.filter-drop > summary::-webkit-details-marker { display: none; }
.filter-drop > summary:hover { border-color: var(--link); }
.filter-drop[open] > summary { border-color: var(--link); }
.filter-drop.is-active > summary { background: var(--text); border-color: var(--text); color: var(--bg); }
.filter-drop__count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--accent); color: var(--on-accent); font-size: .75rem; font-weight: 700; }
.filter-drop__chevron { width: 14px; height: 14px; rotate: 90deg; transition: rotate .2s var(--ease); }
.filter-drop[open] .filter-drop__chevron { rotate: -90deg; }
.filter-drop__panel { margin: 0; padding: 0; border: 0; min-width: 0; }
.filter-drop__panel .choice { min-height: 38px; }
.filter-more > summary { cursor: pointer; padding: 8px 0; font-size: .9375rem; font-weight: 600; color: var(--link); }
.catalog-filters .filters__actions { display: flex; gap: var(--space-2); }
.catalog .results-bar { margin-bottom: var(--space-5); }

@media (min-width: 1024px) {
  .catalog-filters .filters-panel__head { display: none; }
  .filter-drop__panel {
    position: absolute; z-index: 40; top: calc(100% + 8px); left: 0; width: 280px; max-height: 380px; overflow-y: auto;
    padding: var(--space-2) var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow);
  }
  /* Z JS zaznaczenie od razu filtruje, więc przyciski są zbędne (bez JS zostają). */
  .js .catalog-filters .filters__actions { display: none; }
}
@media (max-width: 1023.98px) {
  .catalog-filters__bar { flex-direction: column; align-items: stretch; gap: 0; }
  .catalog-filters__title { flex: none; max-width: none; margin-bottom: var(--space-3); }
  .filter-drop > summary { display: flex; width: 100%; min-height: 56px; padding: 0 2px; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: none; font-size: 1.0625rem; }
  .filter-drop.is-active > summary { background: none; color: var(--text); border-color: var(--border); }
  .filter-drop__chevron { margin-left: auto; }
  .filter-drop__panel { padding: var(--space-2) 2px var(--space-4); border-bottom: 1px solid var(--border); }
  .no-js .catalog-filters .filters__actions { margin-top: var(--space-4); }
}

/* 8. Huby serwisów VOD i lista serwisów -------------------------------------------------------------- */
.anime-card__tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 0; }
.anime-card__tags span { padding: 1px 8px; border-radius: var(--radius-pill); background: var(--chip-bg); border: 1px solid var(--border); font-size: .75rem; font-weight: 600; color: var(--text-muted); }
.vod-hub__logo, .vod-tile__logo { --logo-h: 30px; display: grid; place-items: center; flex: none; width: 150px; height: 80px; padding: 12px 18px; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--border); }
/* Hub serwisu: logo w jednym rzędzie z H1 (także na telefonie), pod spodem lead i jedna linia podsumowania. */
.vod-hub__head { display: flex; align-items: center; gap: var(--space-4); margin: var(--space-5) 0 var(--space-3); }
.vod-hub__head .vod-hub__logo { --logo-h: 26px; width: 120px; height: 64px; padding: 10px 14px; }
.vod-hub__heading { min-width: 0; }
.vod-hub__heading .eyebrow { margin-bottom: 6px; }
.vod-hub__heading h1 { margin: 0; text-wrap: balance; }
.vod-hub__lead { margin: 0 0 var(--space-3); text-wrap: pretty; }
.vod-hub__summary { display: flex; flex-wrap: wrap; row-gap: 2px; margin: 0 0 var(--space-5); padding: 0; list-style: none; font-size: .9375rem; color: var(--text-muted); }
.vod-hub__summary li:not(:last-child)::after { content: "·"; margin: 0 var(--space-2); color: var(--text-subtle); }
.vod-hub__summary strong { color: var(--text); }
.vod-hub__summary a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.vod-hub__summary a:hover { color: var(--link); }
.vod-hub__group { margin-top: var(--space-8); scroll-margin-top: calc(var(--header-h) + var(--space-4)); }
.vod-hub > section.vod-hub__group:first-of-type { margin-top: var(--space-5); }
.hub-intro--after { margin: var(--space-8) 0 0; padding-top: var(--space-6); border-top: 1px solid var(--border); }
/* Link do strony tytułu w serwisie: nad rozciągniętym linkiem karty (z-index 3), więc ma własny cel kliknięcia. */
.anime-card__offer { position: relative; z-index: 4; margin: 0; font-size: .8125rem; font-weight: 600; }
.anime-card__offer a { display: inline-block; padding: 4px 0; color: var(--link); text-underline-offset: 3px; }
/* Nowe i znikające na VOD: skróty do sekcji pod nagłówkiem, grupy jak w hubach serwisów. */
.vod-changes__nav { margin-top: var(--space-5); }
.vod-changes .hub-intro { margin-top: var(--space-6); }
.vod-changes-link { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: var(--space-4); align-items: center; margin-top: var(--space-6); padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); background: var(--surface-2); color: var(--text); text-decoration: none; }
.vod-changes-link:hover { background: var(--surface-3); }
.vod-changes-link__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--accent); color: var(--mp-biel); }
.vod-changes-link__icon svg { width: 22px; height: 22px; }
.vod-changes-link > svg { width: 18px; height: 18px; color: var(--text-muted); }
.vod-changes-link strong { display: block; }
.vod-changes-link .muted { display: block; font-size: .875rem; }
.vod-changes__group { margin-top: var(--space-8); }
.vod-changes-link + .vod-changes-link { margin-top: var(--space-3); }
/* Anime w kinach: dni pokazów jak w kalendarzu; wiersz bez karty anime nie ma okładki. */
.cinema-page__group { margin-top: var(--space-8); }
.cinema-page__group:first-of-type { margin-top: var(--space-6); }
.cinema-page__text { margin-top: var(--space-8); }
/* Anime z polskim dźwiękiem: podsumowanie, skróty do serwisów, zwinięte wyjaśnienie dubbingu i lektora, sekcje jak w hubach. */
.pl-audio .page-hero { padding-bottom: var(--space-3); }
.pl-audio__nav { margin-bottom: var(--space-3); }
.pl-audio__about { max-width: 820px; margin-bottom: var(--space-2); color: var(--text-muted); }
.pl-audio__about summary { width: fit-content; padding: 6px 0; font-weight: 600; cursor: pointer; }
.pl-audio__about summary:hover { color: var(--text); }
.pl-audio__about p { margin: var(--space-2) 0 var(--space-3); text-wrap: pretty; }
.pl-audio .hub-intro { margin-top: var(--space-6); }
.pl-audio__more { margin: var(--space-4) 0 0; font-weight: 600; }
.pl-audio__filter { margin-top: var(--space-8); color: var(--text-muted); text-wrap: pretty; }
.filter-drop__note { margin: var(--space-2) 0 var(--space-2); font-size: .8125rem; line-height: 1.45; color: var(--text-muted); text-wrap: pretty; }
@media (max-width: 639.98px) {
  .vod-hub__head { gap: var(--space-3); margin-top: var(--space-4); }
  .vod-hub__head .vod-hub__logo { --logo-h: 18px; width: 76px; height: 44px; padding: 6px 10px; }
  .vod-hub__heading .eyebrow { margin-bottom: 4px; }
  .vod-hub__lead { font-size: 1rem; line-height: 1.55; }
}
.vod-tiles { list-style: none; margin: var(--space-5) 0 var(--space-7); padding: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.vod-tile { position: relative; display: grid; gap: 6px; padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); transition: border-color .2s; }
.vod-tile:hover { border-color: var(--link); }
.vod-tile__logo { margin-bottom: var(--space-2); }
.vod-tile__title { font-size: 1.125rem; }
.vod-tile__title a { color: var(--text); text-decoration: none; }
.vod-tile__title a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-lg); }
.vod-tile__meta { font-size: .875rem; color: var(--text-subtle); }

/* Nagłówek 1024–1279 px: cztery pozycje menu i wyszukiwarka muszą się zmieścić. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .primary-nav a { padding: 10px 11px; }
  .header-account { padding: 0 12px; }
  .header-account span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .account-menu__name { display: none; }
}

/* 9. Kalendarz premier --------------------------------------------------------------------------------- */
.calendar-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-4); margin: var(--space-6) 0 var(--space-4); }
.calendar-nav__title { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); letter-spacing: -.02em; text-align: center; }
.calendar-nav__title span { display: block; margin-top: 6px; font-size: .875rem; font-weight: 600; letter-spacing: 0; color: var(--text-subtle); }
.calendar-nav__link { display: inline-flex; align-items: center; gap: 6px; justify-self: start; min-height: 44px; padding: 0 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); color: var(--text); font-weight: 600; text-decoration: none; }
.calendar-nav__link:hover { border-color: var(--link); color: var(--link); }
.calendar-nav__link--next { justify-self: end; }
.calendar-nav__link svg { width: 16px; height: 16px; }
.calendar-empty { margin-top: var(--space-4); }
.calendar-continuations { margin-top: var(--space-8); }
.calendar-continuations h2 { font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); }
.calendar-continuations > p { margin: var(--space-2) 0 var(--space-4); text-wrap: pretty; }
/* Plan tygodnia: nowe odcinki kart w emisji, dzień po dniu. */
.calendar-text { margin-top: var(--space-7); }
/* Telefon i tablet: lista dni z premierami zamiast siatki. */
@media (max-width: 899.98px) {
  .calendar-nav { grid-template-columns: 1fr 1fr; }
  .calendar-nav__title { grid-column: 1 / -1; grid-row: 1; }
  .calendar-nav__link span { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Góra wpisu: na desktopie tytuł i podpis obok obrazka wyróżniającego (bez pustego pasa po prawej). */
.article-top { display: grid; gap: var(--space-5); padding-block: var(--space-5) var(--space-3); }
.article-top .article-head { padding-block: 0; }
@media (min-width: 1024px) {
  .article-top.has-figure { grid-template-columns: minmax(0, 1fr) minmax(0, 580px); align-items: center; gap: var(--space-7); }
  .article-top .article-figure { max-width: none; }
  .article-top.has-figure .article-head h1 { font-size: clamp(2rem, 1.4rem + 1.6vw, 2.75rem); }
}

/* Lista serwisów VOD: trzy największe serwisy jako karty z okładkami (podium), mniejsze w tabeli; mierniki udziału polskich napisów i dźwięku. */
.vod-podium { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; gap: var(--space-5); }
@media (min-width: 900px) { .vod-podium { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vod-card { position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow); transition: border-color .2s, translate .2s var(--ease); }
.vod-card.has-hub:hover { border-color: var(--link); translate: 0 -2px; }
.vod-card__rank { position: absolute; top: var(--space-3); left: var(--space-3); z-index: 1; pointer-events: none; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--mp-czern); color: #fff; font-weight: 800; font-size: .875rem; }
.vod-card__covers { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); height: 132px; background: var(--surface-2); }
.vod-card__covers img { width: 100%; height: 100%; object-fit: cover; }
.vod-card__body { display: grid; gap: var(--space-3); padding: var(--space-5); margin-top: -40px; }
.vod-card__body .vod-tile__logo { --logo-h: 22px; position: relative; margin: 0; width: 120px; height: 60px; padding: 8px 12px; box-shadow: var(--shadow); }
.vod-card__title { font-size: 1.125rem; line-height: 1.25; letter-spacing: -.01em; }
.vod-card__title a { color: var(--text); text-decoration: none; }
.vod-card__title a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-xl); }
.vod-card__total { margin: 0; color: var(--text-muted); }
.vod-card__total strong { font-size: 2.25rem; font-weight: 800; letter-spacing: -.03em; color: var(--text); }
.vod-card__cta { display: inline-flex; align-items: center; gap: 6px; font-size: .9375rem; font-weight: 700; color: var(--link); }
.vod-card__cta svg { width: 16px; height: 16px; }
.vod-card__note { font-size: .875rem; color: var(--text-subtle); }
.vod-tile__name { font-weight: 800; font-size: 1.125rem; letter-spacing: -.02em; color: var(--text); }
.vod-meter { display: grid; grid-template-columns: 76px minmax(0, 1fr) 44px; gap: var(--space-3); align-items: center; font-size: .8125rem; font-weight: 700; }
.vod-meter b { text-align: right; font-variant-numeric: tabular-nums; }
.vod-meter__track { height: 8px; border-radius: var(--radius-pill); background: var(--surface-2); overflow: hidden; }
.vod-meter__track i { display: block; height: 100%; border-radius: inherit; background: var(--mp-zima-strong); }
.vod-meter--audio .vod-meter__track i { background: var(--mp-wiosna-strong); }
.vod-rest__title { margin: var(--space-7) 0 var(--space-3); font-size: 1.25rem; }
.vod-rest { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: var(--radius-lg); overflow: hidden; outline: 1px solid var(--border); outline-offset: -1px; }
.vod-rest th, .vod-rest td { padding: var(--space-3) var(--space-4); text-align: left; vertical-align: middle; }
.vod-rest thead th { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-subtle); background: var(--surface-2); }
.vod-rest tbody tr > * { border-top: 1px solid var(--border); }
.vod-rest tbody th { font-weight: 700; }
.vod-rest .num { text-align: right; font-variant-numeric: tabular-nums; }
.vod-rest__rank { width: 32px; color: var(--text-subtle); font-weight: 800; }
.vod-rest__provider { display: flex; align-items: center; gap: var(--space-3); }
.vod-rest__provider .vod-tile__logo { --logo-h: 16px; margin: 0; width: 76px; height: 38px; padding: 4px 8px; border-radius: var(--radius-sm); }
.vod-rest__provider .vod-tile__name { font-size: .875rem; }
.vod-rest__provider a { color: var(--text); }
.vod-rest__name { display: grid; }
.vod-rest__name small { font-size: .75rem; font-weight: 400; color: var(--text-subtle); }
.vod-rest .vod-meter { grid-template-columns: minmax(60px, 1fr) 44px; }
@media (max-width: 599.98px) {
  .vod-rest th, .vod-rest td { padding: var(--space-3) var(--space-2); }
  .vod-rest__rank, .vod-rest__provider .vod-tile__logo { display: none; }
  .vod-rest .vod-meter { grid-template-columns: 1fr; }
  .vod-rest .vod-meter__track { display: none; }
}
.vod-index__bottom { display: grid; gap: var(--space-6); margin-top: var(--space-8); }
@media (min-width: 1024px) { .vod-index__bottom { grid-template-columns: minmax(0, 1fr) 380px; align-items: start; } }
.vod-legend { padding: var(--space-5); border-radius: var(--radius-lg); background: var(--surface-2); }
.vod-legend dl { display: grid; gap: var(--space-3); margin: var(--space-3) 0 0; }
.vod-legend dl > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--space-3); align-items: baseline; }
.vod-legend dd { margin: 0; font-size: .9375rem; color: var(--text-muted); }
.vod-legend__tag { display: inline-block; padding: 1px 8px; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--border); font-size: .75rem; font-weight: 600; color: var(--text-muted); }

/* 10. Kontakt: formularz i treść strony obok ------------------------------------------------------------ */
.contact-layout { display: grid; gap: var(--space-6); align-items: start; margin-top: var(--space-5); }
@media (min-width: 960px) { .contact-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: var(--space-7); } }
.contact-card { display: grid; gap: var(--space-4); padding: var(--space-5); border-radius: var(--radius-xl); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }
@media (min-width: 768px) { .contact-card { padding: var(--space-6); } }
.contact-card h2 { font-size: 1.375rem; }
.contact-form__row { display: grid; gap: var(--space-4); }
@media (min-width: 640px) { .contact-form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.contact-form__message { min-height: 168px; resize: vertical; line-height: 1.55; padding-block: 12px; }
.contact-form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-form .btn { justify-self: start; }
.contact-aside { font-size: .9375rem; }
.contact-aside > :first-child { margin-top: 0; }
.contact-aside h2, .contact-aside h3 { font-size: 1.0625rem; }
.site-footer .site-footer__social { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); }
.site-footer__social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .08); color: var(--mp-biel); transition: background .2s; }
.site-footer__social a:hover { background: var(--mp-kobalt-500); text-decoration: none; }
.site-footer__social svg { width: 20px; height: 20px; }
.avatar--photo { background: none; overflow: hidden; }
.avatar--photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.my-list__user { display: inline-flex; align-items: center; gap: var(--space-2); }
.my-list__avatar { width: 32px; height: 32px; border-radius: 50%; }

/* 11. Profil i publiczna lista ------------------------------------------------------------------------- */
.profile-form { margin-top: var(--space-5); }
.profile-form__identity { display: flex; align-items: center; gap: var(--space-4); }
.profile-form__avatar { width: 64px; height: 64px; border-radius: 50%; flex: none; }
.profile-form__choices { border: 0; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.prefixed-input { display: flex; align-items: stretch; border: 1.5px solid var(--input-border); border-radius: var(--radius-sm); background: var(--input-bg); overflow: hidden; }
.prefixed-input span { display: flex; align-items: center; padding: 0 4px 0 14px; color: var(--text-muted); font-size: .9375rem; white-space: nowrap; }
.prefixed-input .input { border: 0; border-radius: 0; padding-left: 2px; min-width: 0; }
.prefixed-input:focus-within { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
.prefixed-input .input:focus { outline: none; }
@media (max-width: 479.98px) { .prefixed-input span { font-size: .8125rem; padding-left: 10px; } }
.share-box { display: grid; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); background: var(--season-bg, var(--surface-2)); border: 1px solid var(--border); margin-bottom: var(--space-5); }
.share-box__title { font-size: 1.0625rem; margin: 0; }
.share-box__row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.share-box__row .input { flex: 1 1 260px; min-width: 0; }
.public-list__head { display: grid; gap: var(--space-4); align-items: start; margin: var(--space-5) 0 var(--space-6); }
@media (min-width: 640px) { .public-list__head { grid-template-columns: 88px minmax(0, 1fr); gap: var(--space-5); } }
.public-list__avatar { width: 88px; height: 88px; border-radius: 50%; box-shadow: var(--shadow); }
/* MangaPilot: publiczna lista bez Gravatara, inicjał nazwy w kółku. */
.public-list__avatar.avatar { font-size: 2.25rem; }
.public-list__head .eyebrow { margin: 0; }
.public-list__counts { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.public-list__counts a { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 14px; border-radius: var(--radius-pill); background: var(--chip-bg); border: 1px solid var(--border-strong); color: var(--text); font-size: .875rem; font-weight: 600; text-decoration: none; }
.public-list__counts a:hover { border-color: var(--link); }
.public-list__group h2 { display: flex; align-items: baseline; gap: var(--space-2); margin-bottom: var(--space-4); }
.public-list__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-7); padding: var(--space-5); border-radius: var(--radius-lg); background: var(--surface-2); }
.public-list__cta p { margin: 0; max-width: 52ch; }
.public-list__group { margin-top: var(--space-7); }

/* 12. Karta anime: hero na telefonie, pierwowzór, podtytuły kolejności ------------------------------------ */

/* Pierwowzór: karta z rodzajem, tytułem i autorem, potem opis, kafelki danych, wydania i źródło. */
.source-card { display: grid; gap: var(--space-3); justify-items: start; padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-2); }
.source-card__kind { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: 0; }
.source-card__relation { font-size: .875rem; color: var(--text-muted); }
.source-card__title { display: grid; gap: 2px; margin: 0; }
.source-card__title strong { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); line-height: 1.2; letter-spacing: -.01em; overflow-wrap: anywhere; }
.source-card__title span { color: var(--text-muted); }
#pierwowzor .source-material__note { margin-top: var(--space-5); }
.source-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-3); margin: var(--space-5) 0 0; }
.source-stats > div { display: grid; gap: 4px; align-content: start; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface-2); }
.source-stats dt { order: 2; font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-subtle); }
.source-stats dd { order: 1; margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.source-material__edition { margin-top: var(--space-5); padding: var(--space-4) var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.source-material__edition h3 { font-size: 1rem; margin: 0 0 var(--space-2); }
.source-material__source { margin: var(--space-4) 0 0; font-size: .875rem; color: var(--text-subtle); }
.source-material__source a { color: var(--text-muted); }
.source-material__source a:hover { color: var(--link); }
@media (max-width: 479.98px) {
  .source-card { padding: var(--space-4); }
  .facts > div { grid-template-columns: minmax(0, 7rem) minmax(0, 1fr); }
}

/* Główne postacie: kafelki z inicjałem w kolorach sezonów zamiast grafik postaci. */
.character-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.character { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--space-3); align-items: start; padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-2); }
.character__mark { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--mp-kobalt-500), var(--mp-kobalt)); color: var(--mp-biel); font-weight: 800; font-size: 1.125rem; }
.character:nth-child(4n+2) .character__mark { background: linear-gradient(135deg, var(--mp-wiosna), var(--mp-wiosna-strong)); }
.character:nth-child(4n+3) .character__mark { background: linear-gradient(135deg, var(--mp-zima), var(--mp-zima-strong)); }
.character:nth-child(4n+4) .character__mark { background: linear-gradient(135deg, var(--mp-jesien), var(--mp-wiosna-strong)); }
.character__body { display: grid; gap: var(--space-1); min-width: 0; }
.character__name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--space-2); margin: 0; font-size: 1.0625rem; line-height: 1.3; }
.character__original { font-size: .8125rem; font-weight: 500; color: var(--text-subtle); }
.character__description { margin: 0; font-size: .9375rem; line-height: 1.55; color: var(--text); }
.character__voices { margin: var(--space-1) 0 0; font-size: .8125rem; line-height: 1.45; color: var(--text-muted); }

/* Wpis: okruszki z odstępem od nagłówka strony, jak na pozostałych szablonach. */
article.type-post > .container > .breadcrumbs:first-child { padding-top: var(--space-5); }

/* Kolejność oglądania: podtytuły grup z wyraźnym odstępem od listy i od poprzedniej grupy. */
#kolejnosc > h3 { margin: var(--space-7) 0 var(--space-3); font-size: 1.125rem; }
#kolejnosc > h2 + h3, #kolejnosc > .watch-prereq + h3 { margin-top: var(--space-4); }
#kolejnosc > .prose + h3 { margin-top: var(--space-6); }
#kolejnosc > h3 + .watch-order { margin-top: var(--space-3); }
#kolejnosc > .watch-order + .watch-order__footnote { margin-top: var(--space-3); }
.watch-order__footnote { font-size: .875rem; color: var(--text-subtle); max-width: 64ch; }
/* Kontynuacja: co obejrzeć przed tą serią. */
.watch-prereq { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--space-3); margin-bottom: var(--space-5); padding: var(--space-4); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.watch-prereq > svg { width: 20px; height: 20px; margin-top: 2px; color: var(--accent); }
/* Ręczny start (manual_start) nie ma ikony: jedyny blok zajmuje całą szerokość zamiast kolumny 20 px. */
.watch-prereq > :only-child { grid-column: 1 / -1; }
.watch-prereq__title { margin: 0; font-weight: 700; }
.watch-prereq__list { margin: var(--space-1) 0 0; padding-left: 1.25em; }
.watch-prereq__list a { font-weight: 700; }
.watch-prereq__list:has(> li:only-child) { list-style: none; padding-left: 0; }
.watch-prereq__summary { margin: var(--space-2) 0 0; font-size: .9375rem; }
.watch-prereq__note p { margin: var(--space-2) 0 0; }
.watch-prereq__summary a, .watch-summary a { font-weight: 700; }
/* Link do streszczenia fabuły na karcie, której dotyczy. */
.watch-summary { margin: var(--space-4) 0 var(--space-5); padding: var(--space-3) var(--space-4); border-left: 3px solid var(--accent); border-radius: 0 var(--radius-md) var(--radius-md) 0; background: color-mix(in srgb, var(--accent) 6%, var(--surface)); font-size: .9375rem; }

/* 13. Newsletter (projekt: frontend/newsletter.html) ---------------------------------------------------
   Jeden blok w trzech miejscach: .nl--article na końcu wpisu, .nl-band w stopce, .nl--hero na stronie newslettera.
   Ściana okładek jest ozdobą (aria-hidden). Formularz to zwykły POST na stronę newslettera, site.js wysyła go w tle. */

.nl {
  --nl-bg: var(--mp-granat);
  --nl-glow: color-mix(in srgb, var(--mp-kobalt-500) 55%, transparent);
  position: relative; isolation: isolate; overflow: hidden; container-type: inline-size;
  border-radius: var(--radius-xl); background: var(--nl-bg); box-shadow: var(--shadow);
}
[data-theme="dark"] .nl { --nl-bg: var(--mp-grafit-900); --nl-glow: color-mix(in srgb, var(--mp-kobalt-500) 26%, transparent); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), var(--shadow); }
.nl::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(55% 75% at 100% 0%, var(--nl-glow), transparent 70%),
    radial-gradient(45% 60% at 0% 100%, color-mix(in srgb, var(--season-graphic) 22%, transparent), transparent 70%);
}
.nl__inner { display: grid; gap: var(--space-5); padding: var(--space-6) var(--space-5) 0; }
.nl__body { display: grid; gap: var(--space-4); align-content: center; min-width: 0; }
.nl__body .eyebrow { margin: 0; }
.nl__title { font-size: clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem); line-height: 1.12; letter-spacing: -.03em; color: var(--mp-biel); }
.nl__lead { color: var(--text-muted); max-width: 52ch; }
@container (min-width: 640px) {
  .nl__inner { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: var(--space-6); padding: var(--space-7) var(--space-6); }
}

/* Trzy rodzaje treści wydania: każdy ze swoim skrzydłem znaku i kolorem sezonu. */
.nl__perks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.nl__perks li { display: inline-flex; align-items: center; gap: 9px; padding: 6px 13px 6px 10px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); font-size: .875rem; font-weight: 600; line-height: 1.3; color: var(--mp-biel); }
.nl__perks li::before { content: ""; flex: none; width: 11px; height: 11px; border-radius: var(--r); background: var(--c); }
.nl__perks li:nth-child(1) { --c: var(--mp-zima); --r: 0 100% 0 0; }
.nl__perks li:nth-child(2) { --c: var(--mp-jesien); --r: 100% 0 0 0; }
.nl__perks li:nth-child(3) { --c: var(--mp-wiosna); --r: 0 0 100% 0; }

/* Formularz: biała „pigułka” z przyciskiem w środku, jak wyszukiwarka w nagłówku. */
.nl-form { display: grid; gap: var(--space-3); max-width: 520px; }
.nl-form__field { display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: var(--radius-pill); background: var(--mp-biel); box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .7); transition: box-shadow .15s; }
.nl-form__field:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--mp-kobalt-500) 65%, transparent), 0 18px 40px -20px rgba(0, 0, 0, .7); }
.nl-form__field input { flex: 1; min-width: 0; height: 44px; padding: 0 8px 0 16px; border: 0; background: transparent; color: var(--mp-granat); font-size: 1rem; }
.nl-form__field input::placeholder { color: var(--mp-stal); }
.nl-form__field input:focus { outline: none; }
.nl-form__field .btn { flex: none; }
.nl-form:has(.nl-form__error:not([hidden])) .nl-form__field { box-shadow: 0 0 0 2px #FF8A80, 0 18px 40px -20px rgba(0, 0, 0, .7); }
.nl-form__error { display: flex; gap: 8px; font-size: .875rem; font-weight: 600; color: #FFB4AB; }
.nl-form__legal { font-size: .8125rem; line-height: 1.5; color: var(--text-subtle); max-width: 54ch; text-wrap: pretty; }
.nl-form__legal a { color: var(--text-muted); white-space: nowrap; }
.nl-form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 419.98px) {
  .nl-form__field { flex-wrap: wrap; border-radius: var(--radius-lg); }
  .nl-form__field input { flex-basis: 100%; }
  .nl-form__field .btn { width: 100%; }
}

/* Stan po wysłaniu: link potwierdzający jest w skrzynce (double opt-in). */
.nl-done { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3) var(--space-4); align-items: start; max-width: 520px; padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); }
.nl-done__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 0 100% 0 0; background: var(--mp-kobalt-500); color: var(--mp-biel); }
.nl-done__icon svg { width: 22px; height: 22px; translate: -3px 3px; }
.nl-done strong { display: block; font-size: 1.0625rem; color: var(--mp-biel); }
.nl-done p { color: var(--text-muted); font-size: .9375rem; }

/* Ilustracja: ściana okładek. Pochylone kolumny przesuwają się powoli w przeciwnych kierunkach i wychodzą poza krawędź bloku.
   Trzy okładki mają plakietki działów wydania. W motywie okładki pochodzą z opublikowanych kart anime. */
.nl__visual { position: relative; min-width: 0; }

.nl-cover { position: relative; aspect-ratio: 2 / 3; border-radius: var(--radius-md); overflow: hidden; background: linear-gradient(160deg, var(--mp-kobalt-500), var(--mp-granat)); box-shadow: 0 18px 30px -18px rgba(0, 0, 0, .8); }
.nl-cover img { width: 100%; height: 100%; object-fit: cover; }
.nl-cover__badge { position: absolute; left: 8px; bottom: 8px; max-width: calc(100% - 16px); padding: 4px 10px; border-radius: var(--radius-pill); background: var(--badge-bg); color: var(--badge-fg); font-size: .75rem; font-weight: 700; line-height: 1.25; white-space: nowrap; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .7); }
.nl-cover__badge--new { --badge-bg: var(--mp-kobalt-500); --badge-fg: var(--mp-biel); }
.nl-cover__badge--last { --badge-bg: var(--mp-jesien); --badge-fg: var(--mp-granat); }
.nl-cover__badge--recap { --badge-bg: var(--mp-wiosna); --badge-fg: var(--mp-granat); }

/* Telefon: pas pod formularzem, wygaszony u góry. Od 640 px: prawa część bloku na całą wysokość, wygaszona w lewo. */
.nl__visual--wall { height: 210px; margin-inline: calc(-1 * var(--space-5)); }
.nl-wall { position: absolute; inset: 0; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%); mask-image: linear-gradient(180deg, transparent, #000 30%); }
.nl-wall__track { --gap: 14px; position: absolute; inset: -45% -12% -45% -8%; display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: var(--gap); rotate: -12deg; }
.nl-wall__col { display: grid; gap: var(--gap); align-content: start; padding-bottom: var(--gap); }
.nl-wall__col:nth-child(even) { translate: 0 -50%; }
@container (min-width: 640px) {
  .nl__visual--wall { position: static; height: auto; margin: 0; }
  .nl-wall { left: auto; width: var(--wall-w, 44%); -webkit-mask-image: linear-gradient(90deg, transparent, #000 38%); mask-image: linear-gradient(90deg, transparent, #000 38%); }
}

/* Koniec wpisu: blok po ramce autora. */
.nl--article { margin-top: var(--space-7); --wall-w: 40%; }
@container (min-width: 640px) {
  .nl--article .nl__inner { grid-template-columns: minmax(0, 1fr) minmax(0, .72fr); }
}

/* Strona /newsletter/: ten sam blok jako pełnoszerokościowy hero pod nagłówkiem. */
.nl--hero { border-radius: 0; box-shadow: none; --wall-w: 50%; }
[data-theme="dark"] .nl--hero { box-shadow: none; border-bottom: 1px solid var(--border); }
.nl--hero .nl__inner { padding: var(--space-7) 0 0; }
.nl--hero .nl__title { font-size: clamp(2.25rem, 1.4rem + 3.4vw, 3.75rem); line-height: 1.04; letter-spacing: -.04em; }
.nl--hero .nl__lead { font-size: clamp(1rem, .95rem + .3vw, 1.1875rem); }
.nl--hero .nl__visual--wall { height: 250px; margin-inline: calc(-1 * var(--gutter)); }
@container (min-width: 640px) {
  .nl--hero .nl__inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--space-8); padding-block: var(--space-8); }
  .nl--hero .nl__visual--wall { height: auto; margin: 0; }
}

/* Pas w stopce: kobaltowa plakietka nad kolumnami linków, okładki po prawej. Nie pokazujemy go tam, gdzie jest już blok (wpis, /newsletter/). */
.site-footer:has(.nl-band) { padding-top: var(--space-6); }
.nl-band {
  position: relative; isolation: isolate; overflow: hidden; container-type: inline-size;
  margin-bottom: calc(var(--space-7) + var(--space-2)); border-radius: var(--radius-xl);
  background: var(--mp-kobalt); color: var(--mp-biel); --text-muted: #F6DDD5; --text-subtle: #EBC7BC; --wall-w: 36%;
}
[data-theme="dark"] .nl-band { background: var(--mp-kobalt-500); }
.nl-band__inner { display: grid; }
.nl-band__body { display: grid; gap: var(--space-4) var(--space-6); align-items: center; padding: var(--space-5); }
.nl-band h2 { margin: 0; font-size: clamp(1.375rem, 1.2rem + .7vw, 1.75rem); font-weight: 700; letter-spacing: -.02em; text-transform: none; color: var(--mp-biel); }
.nl-band__text p { color: #F6DDD5; font-size: .9375rem; margin-top: 4px; max-width: 46ch; }
.nl-band .nl-form, .nl-band .nl-done { max-width: 460px; }
.nl-band .nl-form__legal { color: #EBC7BC; text-wrap: balance; }
.nl-band .nl-form__legal a { color: var(--mp-biel); text-decoration: underline; }
.nl-band .nl-form__field { box-shadow: 0 14px 30px -18px rgba(5, 10, 50, .8); }
.nl-band .btn--primary { background: var(--mp-granat); box-shadow: none; }
.nl-band .btn--primary:hover { background: #050B33; }
.nl-band .nl__visual--wall { order: -1; height: 150px; margin: 0; }
.nl-band .nl-wall { -webkit-mask-image: linear-gradient(0deg, transparent, #000 45%); mask-image: linear-gradient(0deg, transparent, #000 45%); }
.nl-band .nl-wall__track { --gap: 10px; inset: -60% -10%; }
@container (min-width: 760px) {
  .nl-band__inner { grid-template-columns: minmax(0, 1fr) minmax(0, var(--wall-w)); }
  .nl-band__body { padding: var(--space-6); }
  .nl-band .nl__visual--wall { order: 0; position: static; height: auto; }
  .nl-band .nl-wall { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%); mask-image: linear-gradient(90deg, transparent, #000 40%); }
  .nl-band .nl-wall__track { inset: -50% -10% -50% -6%; }
}
@container (min-width: 1080px) {
  .nl-band__inner { --wall-w: 24%; }
  .nl-band__body { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); }
}

/* Strona /newsletter/: sekcje pod hero. */
.nl-features { display: grid; gap: var(--space-4); }
@media (min-width: 768px) { .nl-features { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.nl-feature { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-5); border-radius: var(--radius-lg); border: 1px solid color-mix(in srgb, var(--season-graphic) 20%, var(--border)); background: radial-gradient(110% 90% at 100% 100%, color-mix(in srgb, var(--season-graphic) 18%, transparent), transparent 65%), var(--surface); }
.nl-feature::before { content: ""; width: 38px; height: 38px; margin-bottom: var(--space-2); border-radius: var(--blade); background: var(--season-graphic); }
.nl-feature h3 { font-size: 1.1875rem; }
.nl-feature p { color: var(--text-muted); font-size: .9375rem; }

/* Jak działa: kroki zapisu w pionie na ciemnej karcie, obok pytania. */
.nl-how { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 900px) { .nl-how { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-7); } }
.nl-how h3 { font-size: 1.1875rem; margin-bottom: var(--space-5); }
.nl-how__steps { position: relative; isolation: isolate; overflow: hidden; padding: var(--space-6) var(--space-5); border-radius: var(--radius-xl); background: var(--mp-granat); box-shadow: var(--shadow); }
[data-theme="dark"] .nl-how__steps { background: var(--mp-grafit-800); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.nl-how__steps::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 60% at 100% 0%, color-mix(in srgb, var(--mp-kobalt-500) 40%, transparent), transparent 70%); }
@media (min-width: 900px) { .nl-how__steps { padding: var(--space-6); position: sticky; top: calc(var(--header-h) + var(--space-4)); } }
.nl-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); counter-reset: krok; }
.nl-steps li { counter-increment: krok; position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: var(--space-4); align-content: start; }
.nl-steps li::before { content: counter(krok); grid-row: 1 / span 2; display: grid; place-items: end start; width: 40px; height: 40px; padding: 0 0 5px 9px; border-radius: 0 100% 0 0; background: var(--mp-kobalt-500); color: var(--mp-biel); font-size: 1rem; font-weight: 800; line-height: 1; }
.nl-steps li:not(:last-child)::after { content: ""; position: absolute; left: 19px; top: 48px; bottom: calc(-1 * var(--space-5) + 8px); width: 2px; border-radius: 2px; background: rgba(255, 255, 255, .18); }
.nl-steps strong { font-size: 1.0625rem; color: var(--mp-biel); padding-top: 2px; }
.nl-steps p { grid-column: 2; color: var(--text-muted); font-size: .9375rem; }
.nl-how__cta { margin-top: var(--space-6); }

.nl-faq { display: grid; gap: var(--space-3); }
.nl-faq details { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.nl-faq summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); font-weight: 700; cursor: pointer; list-style: none; }
.nl-faq summary::-webkit-details-marker { display: none; }
.nl-faq summary::after { content: ""; flex: none; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; rotate: 45deg; translate: 0 -3px; opacity: .6; transition: rotate .2s var(--ease); }
.nl-faq details[open] summary::after { rotate: 225deg; translate: 0 2px; }
.nl-faq details p { padding: 0 var(--space-5) var(--space-4); color: var(--text-muted); max-width: 68ch; }

.nl-done__local { margin-top: 6px; font-size: .875rem; color: var(--text-subtle); }
.nl-done--ok .nl-done__icon { background: var(--mp-zima); color: var(--mp-granat); }
.nl-band .nl-done { background: rgba(255, 255, 255, .12); }

/* Profil: komunikat o zapisie na newsletter pod polem wyboru. */
.profile-form__newsletter .field__hint strong { color: var(--text); }

@keyframes nl-wall { to { translate: 0 -50%; } }
@keyframes nl-wall-down { from { translate: 0 -50%; } to { translate: 0 0; } }
@media (prefers-reduced-motion: no-preference) {
  /* Jedyny stały ruch bloku: wolny przesuw kolumn okładek w przeciwnych kierunkach. */
  .nl-wall__col { animation: nl-wall 70s linear infinite; }
  .nl-wall__col:nth-child(even) { animation-name: nl-wall-down; animation-duration: 85s; }
}

/* 13. Listy wierszy według IMDb: kalendarz i ranking ------------------------------------------------------------------ */
.rows-layout { display: grid; gap: var(--space-7); align-items: start; margin-top: var(--space-5); }
@media (min-width: 1024px) { .rows-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-8); } }
.row-tabs { display: flex; flex-wrap: wrap; gap: var(--space-5); margin-bottom: var(--space-5); border-bottom: 1px solid var(--border); }
.row-tabs[hidden] { display: none; }
.row-tabs button { position: relative; padding: 10px 2px 12px; border: 0; background: none; color: var(--text-muted); font: inherit; font-weight: 700; cursor: pointer; }
.row-tabs button:hover { color: var(--text); }
.row-tabs [aria-selected="true"], .row-tabs [aria-pressed="true"] { color: var(--text); }
.row-tabs [aria-selected="true"]::after, .row-tabs [aria-pressed="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 2px 2px 0 0; background: var(--link); }
.row-panel[hidden] { display: none; }
.row-panel + .row-panel { margin-top: var(--space-7); }
.row-day { margin-bottom: var(--space-6); }
.row-day h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 var(--space-2); font-size: 1.25rem; }
.row-day[hidden] { display: none; }
.row-day.is-past h3 { color: var(--text-muted); }
.row-day__today { padding: 2px 8px; border-radius: var(--radius-pill); background: var(--link); color: var(--mp-biel); font-size: .75rem; font-weight: 700; }
.row-note { margin-top: var(--space-4); font-size: .875rem; }
.row-day__today[hidden] { display: none; }
.row-day__empty { margin: 0; padding: var(--space-3) 0; }
/* Plan tygodnia: pasek dni (przełącznik dnia z JS, kotwice bez JS). */
.week-strip { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; margin: var(--space-5) 0 var(--space-6); padding: 0; list-style: none; }
.week-strip__day { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 64px; padding: 8px 4px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); text-decoration: none; line-height: 1.1; }
.week-strip__day span { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.week-strip__day strong { font-size: 1.25rem; }
.week-strip__day--all strong { font-size: .9375rem; padding: 3px 0 2px; }
.week-strip__day small { font-size: .75rem; font-weight: 600; color: var(--text-subtle); }
.week-strip__day:hover { border-color: var(--link); }
.week-strip__day.is-empty strong { color: var(--text-muted); }
.week-strip__day.is-today { border-color: var(--link); }
.week-strip__day.is-today span { color: var(--link); }
.week-strip__day[aria-pressed="true"] { border-color: var(--link); background: var(--link); color: var(--mp-biel); }
.week-strip__day[aria-pressed="true"] span, .week-strip__day[aria-pressed="true"] small, .week-strip__day[aria-pressed="true"] strong { color: inherit; }
.media-row.is-aired .media-row__time { color: var(--text-muted); }
.media-row__time small { display: block; font-size: .6875rem; font-weight: 600; white-space: nowrap; }
@media (max-width: 640px) {
  .calendar-nav__word { display: none; }
  .week-strip { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
  .week-strip > li:first-child { grid-column: 1 / -1; }
  .week-strip__day { min-height: 58px; padding: 6px 2px; }
  .week-strip__day span { font-size: .625rem; letter-spacing: .02em; }
  .week-strip__day strong { font-size: 1.125rem; }
  .week-strip__day--all { flex-direction: row; justify-content: center; gap: 6px; min-height: 40px; }
  .week-strip__day--all strong { font-size: .875rem; padding: 0; }
  .week-strip__day--all span { font-size: .875rem; text-transform: none; letter-spacing: 0; color: inherit; font-weight: 700; }
  .week-strip__day--all small::before { content: "· "; }
}
.media-rows { margin: 0; padding: 0; list-style: none; }
.media-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: var(--space-4); align-items: center; padding: 12px 0; border-top: 1px solid var(--border); }
.media-row:last-child { border-bottom: 1px solid var(--border); }
.media-row[hidden] { display: none; }
.media-row--time { grid-template-columns: 52px 52px minmax(0, 1fr) auto; }
.media-row--rank { grid-template-columns: 52px 64px minmax(0, 1fr) auto; }
.media-row__poster { position: relative; }
.media-row__poster .poster { border-radius: 6px; box-shadow: none; }
.media-row__time { font-weight: 800; font-variant-numeric: tabular-nums; }
.media-row__rank { display: grid; justify-items: center; gap: 2px; }
.media-row__rank strong { font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.media-row__rank small { font-size: .75rem; font-weight: 700; color: var(--text-subtle); white-space: nowrap; }
.media-row__rank .is-up { color: #1F8A4C; }
.media-row__rank .is-down { color: #C2410C; }
[data-theme="dark"] .media-row__rank .is-up { color: #4ADE80; }
[data-theme="dark"] .media-row__rank .is-down { color: #FB923C; }
.media-row__title { margin: 0; font-size: 1.0625rem; font-weight: 700; line-height: 1.3; }
.media-row__title a { color: var(--text); text-decoration: none; }
.media-row__title a:hover { color: var(--link); text-decoration: underline; }
.media-row__meta { display: flex; flex-wrap: wrap; gap: 0 8px; margin: 2px 0 0; color: var(--text-muted); font-size: .875rem; }
.media-row__meta > * + *::before { content: "·"; margin-right: 8px; color: var(--text-subtle); }
.media-row__sub { margin: 2px 0 0; color: var(--text-muted); font-size: .875rem; }
.media-row__end { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-3); }
.media-row__logos { display: inline-flex; align-items: center; gap: var(--space-3); --logo-h: 18px; }
.media-row__badge { padding: 3px 9px; border-radius: var(--radius-pill); background: var(--surface-2); color: var(--text-muted); font-size: .75rem; font-weight: 700; white-space: nowrap; }
.rows-rail > section + section { margin-top: var(--space-6); }
.rows-rail h2 { margin: 0 0 var(--space-3); font-size: 1.125rem; }
.rows-rail p { margin: 0 0 var(--space-3); }
.rows-rail__more { display: inline-flex; align-items: center; gap: 4px; margin-top: var(--space-4); font-weight: 700; }
.rows-rail__more svg { width: 16px; height: 16px; }
.media-rows--compact .media-row { grid-template-columns: 40px minmax(0, 1fr); padding: 8px 0; }
.media-rows--compact .media-row__end, .media-rows--compact .media-row__sub { display: none; }
.media-rows--compact .media-row__title { font-size: .9375rem; }
.media-rows--compact .media-row__meta { flex-wrap: nowrap; overflow: hidden; white-space: nowrap; font-size: .8125rem; }
.media-rows--compact .list-add { display: none; }
.pill-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pill-list a { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); color: var(--text); font-size: .875rem; font-weight: 600; text-decoration: none; }
.pill-list a:hover { border-color: var(--text); }
@media (max-width: 767.98px) {
  .media-row { grid-template-columns: 44px minmax(0, 1fr); }
  .media-row--time { grid-template-columns: 44px 44px minmax(0, 1fr); }
  .media-row--rank { grid-template-columns: 36px 52px minmax(0, 1fr); }
  .media-row__end { grid-column: 2 / -1; justify-content: flex-start; }
  .media-row--time .media-row__end { grid-column: 3; }
  .media-row--rank .media-row__end { grid-column: 3; }
  .media-row__rank strong { font-size: 1.25rem; }
  .media-row__title { font-size: .9375rem; }
  .media-row__sub, .media-row__meta { font-size: .8125rem; }
  .media-row { gap: var(--space-3); }
}

/* Ranking czytelników: średnia z liczbą ocen w wierszu, zaproszenie do oceniania i wolne miejsca. */
.media-row__score { display: grid; grid-template-columns: auto auto; align-items: baseline; column-gap: 4px; text-align: right; }
.media-row__score strong { font-size: 1.125rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.media-row__stars { color: var(--mp-lato); font-size: 1rem; }
.media-row__score small { grid-column: 1 / -1; color: var(--text-muted); font-size: .8125rem; white-space: nowrap; }
/* Logotypy w kolumnie o stałej szerokości, delikatny separator i ocena w jednej kolumnie przy prawej krawędzi wiersza. */
.media-row--rated .media-row__end { display: grid; grid-template-columns: 252px 84px; align-items: center; gap: 0; }
.media-row--rated .media-row__logos { justify-content: flex-end; padding-right: var(--space-4); }
.media-row--rated .media-row__score { align-self: stretch; align-content: center; justify-content: end; padding-left: var(--space-4); border-left: 1px solid var(--border); }
.media-row--rated .media-row__logos:empty + .media-row__score { border-left-color: transparent; }
/* Telefon i widok z kolumną boczną przy 1024–1279 px mają za mało miejsca na tytuł: logotypy i ocena przechodzą pod niego, ocena przy prawej krawędzi. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .media-row--rated { grid-template-columns: 52px 64px minmax(0, 1fr); }
}
@media (max-width: 767.98px), (min-width: 1024px) and (max-width: 1279.98px) {
  .media-row--rated { row-gap: var(--space-2); }
  .media-row--rated > .media-row__rank, .media-row--rated > .media-row__poster { grid-row: 1 / span 2; }
  .media-row--rated .media-row__body { grid-column: 3; align-self: end; }
  .media-row--rated .media-row__end { grid-column: 3; align-self: start; display: flex; flex-wrap: nowrap; gap: 0; }
  .media-row--rated .media-row__logos { flex: 1; flex-wrap: wrap; justify-content: flex-start; row-gap: var(--space-2); min-width: 0; padding-right: var(--space-3); }
  .media-row--rated .media-row__score { flex: none; min-width: 5.25rem; justify-content: start; padding-left: var(--space-3); text-align: left; }
}
.media-row--slot .media-row__rank strong { color: var(--text-subtle); }
.media-row__slot { display: grid; place-items: center; aspect-ratio: 2 / 3; border: 1px dashed var(--border-strong); border-radius: 6px; background: var(--surface-2); }
.media-row__slot img { opacity: .45; }
.media-row--slot .media-row__title { color: var(--text-muted); font-weight: 600; }
.rank-invite { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--space-4); margin-bottom: var(--space-6); padding: var(--space-5); border-radius: var(--radius-lg); background: var(--surface-2); }
.rank-invite__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--mp-lato-tint); color: var(--mp-lato-strong); font-size: 1.375rem; }
.rank-invite h2 { margin: 0 0 var(--space-2); font-size: 1.25rem; text-wrap: balance; }
.rank-invite p { margin: 0 0 var(--space-4); color: var(--text-muted); text-wrap: pretty; }
.rank-method { margin-top: var(--space-7); }
.hp-picks__more + .hp-picks__more { margin-left: var(--space-5); }
.rank-method p { text-wrap: pretty; }
.rank-steps { margin: 0; padding-left: 1.25rem; display: grid; gap: var(--space-2); color: var(--text-muted); }
@media (max-width: 767.98px) {
  .rank-invite { grid-template-columns: minmax(0, 1fr); padding: var(--space-4); }
  .media-row--slot .media-row__body { grid-column: 3; }
  .media-row__score { text-align: left; }
}

/* Źródła pod newsem: drobniej i szarym kolorem, link bez wyróżnienia (podkreślenie dopiero po najechaniu). */
.entry-content .news-sources { margin-top: var(--space-6); font-size: .875rem; color: var(--text-subtle); }
.entry-content .news-sources a { color: inherit; font-weight: 400; text-decoration: none; }
.entry-content .news-sources a:hover { color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px; }

/* Forum na karcie anime (components/anime-forum.php); reszta stylów forum w forum.css. */
.anime-forum { margin-top: var(--space-7); padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.anime-forum__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.anime-forum__head h2 { font-size: 1.25rem; }
.anime-forum p { margin: 0; }
.anime-forum__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.anime-forum__list li { display: grid; gap: 2px; }
.anime-forum__list a { display: inline-flex; align-items: flex-start; gap: var(--space-2); font-weight: 600; }
.anime-forum__list svg { width: 18px; height: 18px; flex: none; margin-top: 3px; }
.anime-forum__list .small { padding-left: 26px; }

/* Konkurs „Pilot miesiąca” (components/contest-bar.php, contest-profile.php). Pasek w układzie strony, bez nakładki. */
.contest-bar { background: var(--accent); color: #fff; font-size: .875rem; line-height: 1.4; }
.contest-bar__inner { display: flex; align-items: center; gap: var(--space-3); min-height: 44px; }
.contest-bar__text { flex: 1; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .4em; row-gap: 2px; margin: 0; padding: 8px 0; }
.contest-bar__text a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.contest-bar__narrow { display: none; }
@media (max-width: 767px) {
  .contest-bar__wide, .contest-bar__more { display: none; }
  .contest-bar__narrow { display: inline; }
}
.contest-bar__close { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; margin-right: -10px; border: 0; border-radius: var(--radius-md); background: transparent; color: #fff; cursor: pointer; }
.contest-bar__close svg { width: 18px; height: 18px; }
.contest-bar__close:hover { background: rgba(255, 255, 255, .14); }
.contest-bar__close:focus-visible, .contest-bar__text a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.contest-profile { margin-top: var(--space-6); scroll-margin-top: var(--space-6); }
.contest-profile p { margin: 0; }
.contest-profile__consent { align-items: flex-start; }
.contest-profile__consent input { margin-top: 2px; }
.contest-profile__withdraw summary { cursor: pointer; color: var(--link); font-weight: 600; }
.contest-profile__withdraw form { margin-top: var(--space-3); }
.contest-score { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--space-3); margin: 0; }
.contest-score div { padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface-2); }
.contest-score dt { font-size: .8125rem; color: var(--text-muted); }
.contest-score dd { margin: 0; font-size: 1.125rem; }
.forum-post__contest { margin: var(--space-3) 0 0; }
.contest-ranking { display: grid; gap: var(--space-3); margin-block: var(--space-6); }
.contest-ranking__list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.contest-ranking__row { display: grid; grid-template-columns: 3ch minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: 10px var(--space-4); border-radius: var(--radius-md); background: var(--surface-2); }
.contest-ranking__row--top { font-weight: 700; }
.contest-ranking__alias { overflow-wrap: anywhere; }
.contest-ranking__total { white-space: nowrap; }
.contest-ranking--upcoming { padding: var(--space-5); border: 1px dashed var(--border); border-radius: var(--radius-lg); }
.contest-ranking--upcoming p { margin: 0; }
.contest-ranking__row--empty { color: var(--text-muted); font-weight: 400; }
.prose .contest-ranking h2 { margin: 0; }
.prose .contest-ranking__list { margin: 0; padding: 0; }
.prose .contest-ranking__list li { margin: 0; padding-left: var(--space-4); }
.prose .contest-ranking__list li::marker { content: none; }

/* Figurki Funko Pop! (karuzele, katalog /funko/, karta figurki). Zdjęcia z Amazon w całości: contain, białe tło jak w sklepie. */
.ad-label { margin: 0 0 var(--space-4); font-size: .8125rem; color: var(--text-muted); }
.section-head + .ad-label { margin-top: calc(-1 * var(--space-3)); }
.funko-filter__status + .ad-label { margin-top: calc(-1 * var(--space-1)); }
.funko-box .ad-label, .prose .funko-box .ad-label { margin: calc(-1 * var(--space-3)) 0 var(--space-4); }
.funko-card { position: relative; display: flex; flex-direction: column; height: 100%; }
.funko-card__media { display: block; aspect-ratio: 1; border-radius: var(--radius-md); background: #fff; border: 1px solid var(--border); overflow: hidden; }
.funko-card__media img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 8%; transition: scale .3s var(--ease); }
.funko-card:hover .funko-card__media img { scale: 1.03; }
.funko-card__body { display: flex; flex-direction: column; flex: 1; gap: 4px; padding-top: var(--space-3); }
.funko-card__series { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.funko-card__title { font-size: 1rem; line-height: 1.3; }
.funko-card__title a { color: inherit; text-decoration: none; }
.funko-card__title a:hover { color: var(--link); }
.funko-card__meta { font-size: .875rem; color: var(--text-muted); }
.funko-rail__track > li { padding-top: 0; }
.funko-filter { margin-bottom: var(--space-4); }
.funko-filter .segmented { list-style: none; margin: 0; padding: 0; }
.funko-filter__status { font-weight: 700; margin-bottom: var(--space-2); }
/* Telefon: serie w jednym przewijanym rzędzie zamiast kilku rzędów przycisków nad listą (aktywny przewija się do widoku). */
@media (max-width: 639.98px) {
  .funko-filter .segmented { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter); scroll-padding-inline: var(--gutter); }
  .funko-filter .segmented::-webkit-scrollbar { display: none; }
  .funko-filter .segmented li { flex: none; }
  .funko-filter .segmented a { white-space: nowrap; }
}
.funko-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-4); }
@media (min-width: 640px) { .funko-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .funko-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6) var(--space-5); } }
@media (min-width: 1240px) { .funko-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.funko-empty { display: grid; justify-items: start; gap: var(--space-3); padding: var(--space-5); border: 1px dashed var(--border-strong); border-radius: var(--radius-md); }
.funko-page__text { margin-top: var(--space-8); max-width: none; }
/* FAQ katalogu: wyraźny odstęp pod nagłówkiem, między pytaniami i między pytaniem a rozwiniętą odpowiedzią. */
.funko-page__text h2 + .wp-block-details { margin-top: var(--space-5); }
.funko-page__text .wp-block-details + .wp-block-details { margin-top: var(--space-3); }
.funko-page__text .wp-block-details > summary + * { margin-top: var(--space-3); }
.funko-page__text .wp-block-details > p + p { margin-top: .8em; }
.funko-product { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 900px) { .funko-product { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-7); } }
.funko-product__info h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); line-height: 1.08; letter-spacing: -.03em; }
.funko-product__info > * + * { margin-top: var(--space-4); }
.funko-product__offer { display: grid; justify-items: start; gap: var(--space-2); padding: var(--space-5); border-radius: var(--radius-lg); background: var(--surface-2); }
.funko-product__offer .ad-label { margin: 0; }
.funko-facts { display: grid; margin: 0; border-top: 1px solid var(--border); }
.funko-product__info > .funko-facts { margin-top: var(--space-5); }
.funko-product-page > .breadcrumbs { margin-bottom: var(--space-5); }
.funko-facts > div { display: grid; grid-template-columns: minmax(120px, 38%) minmax(0, 1fr); gap: var(--space-4); padding-block: 10px; border-bottom: 1px solid var(--border); }
.funko-facts dt { color: var(--text-muted); }
.funko-facts dd { margin: 0; font-weight: 600; }
.funko-gallery { min-width: 0; }
.funko-gallery__track { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--border); }
.funko-gallery__track::-webkit-scrollbar { display: none; }
.funko-gallery__slide { scroll-snap-align: start; aspect-ratio: 1; }
.funko-gallery__slide img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 6%; }
.funko-gallery__thumbs { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: flex; gap: var(--space-3); }
.funko-gallery__thumbs a { display: grid; justify-items: center; gap: 4px; width: 96px; padding: 4px; border: 2px solid var(--border); border-radius: var(--radius-md); color: var(--text-muted); font-size: .75rem; text-decoration: none; }
.funko-gallery__thumbs a[aria-current] { border-color: var(--link); color: var(--text); }
.funko-gallery__thumbs img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; border-radius: 8px; }
/* Blok „Figurki Funko” we wpisie (components/funko-box.php): jedna figurka poziomo albo 3–4 w rzędzie (nigdy dwie), na telefonie przewijany rząd.
   Celowo inny niż box anime (.anime-embed: ramka i białe tło): tło bez ramki. Bez przycisku Amazon i oznaczenia reklamy,
   cała karta prowadzi do strony figurki (uwagi właściciela 25.10.2026). */
.prose .funko-box { margin: 2.2em 0; padding: var(--space-5); border-radius: var(--radius-lg); background: var(--surface-2); font-size: 1rem; line-height: 1.5; }
.prose .funko-box__title { margin: 0 0 var(--space-4); font-size: 1.125rem; line-height: 1.25; letter-spacing: -.01em; }
.prose .funko-box__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.prose .funko-box__list > li { margin: 0; }
/* position: relative: obszar kliknięcia nazwy (::after) obejmuje całą kartę figurki. */
.funko-box__item { position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.funko-box__media { display: block; aspect-ratio: 1; border-radius: var(--radius-md); background: #fff; overflow: hidden; }
.funko-box__media img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 8%; }
.funko-box__body { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; height: 100%; }
.prose .funko-box__body > * { margin: 0; }
.funko-box__series { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.prose .funko-box__name { font-size: 1.0625rem; line-height: 1.3; overflow-wrap: anywhere; }
.funko-box__name a { color: var(--text); text-decoration: none; }
.funko-box__name a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-md); }
.funko-box__item:hover .funko-box__name a { color: var(--link); text-decoration: underline; }
.funko-box__meta { font-size: .875rem; color: var(--text-muted); }
.prose .funko-box__summary { margin-top: var(--space-2); font-size: .9375rem; line-height: 1.55; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; line-clamp: 3; overflow: hidden; }
@media (min-width: 640px) {
  .funko-box--single .funko-box__item { grid-template-columns: 148px minmax(0, 1fr); align-items: center; }
  .prose .funko-box--multi .funko-box__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .prose .funko-box--n3 .funko-box__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Kilka figurek: zdjęcie nad opisem. */
.funko-box--multi .funko-box__item { grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--space-3); }
@media (max-width: 639px) {
  .prose .funko-box--multi .funko-box__list { grid-auto-flow: column; grid-auto-columns: 62%; grid-template-columns: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding-bottom: var(--space-2); }
  .funko-box--multi .funko-box__item { scroll-snap-align: start; }
}
@media (max-width: 399px) {
  .prose .funko-box { padding: var(--space-4); }
  .funko-box--single .funko-box__item { grid-template-columns: 88px minmax(0, 1fr); gap: var(--space-3); }
}
/* Telefon: mniejsze zdjęcie główne, miniatury w pionie po prawej (decyzja właściciela 23.10.2026). */
@media (max-width: 899.98px) {
  .funko-gallery { display: grid; grid-template-columns: minmax(0, 1fr) 76px; gap: var(--space-3); align-items: start; max-width: 420px; }
  .funko-gallery__thumbs { flex-direction: column; margin: 0; gap: var(--space-2); }
  .funko-gallery__thumbs a { width: 76px; font-size: .6875rem; }
}
.funko-product__about { margin-top: var(--space-8); max-width: 820px; }
.funko-anime { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 var(--space-6); }
@media (min-width: 640px) { .funko-anime { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .funko-anime { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Profile postaci i strony serii (25.10.2026): ten sam nagłówek co karta anime (.title-hero.tt-hero), portret zamiast
   okładki, spoilery wplecione w sekcje. --------------------------------------------------------------------------- */
.char-portrait { position: relative; display: grid; place-items: center; overflow: hidden; isolation: isolate; flex: none;
  background: var(--mp-granat); background-image: var(--grid-lines); background-size: 28px 28px; color: var(--mp-biel); --tone: var(--mp-kobalt-500); }
.char-portrait--tone-1 { --tone: var(--mp-wiosna-strong); }
.char-portrait--tone-2 { --tone: var(--mp-zima-strong); }
.char-portrait--tone-3 { --tone: var(--mp-jesien); }
.char-portrait::before { content: ""; position: absolute; z-index: -1; width: 86%; aspect-ratio: 1; right: -18%; top: -16%; background: var(--tone); border-bottom-left-radius: 100%; }
.char-portrait.has-image::before { display: none; }
.char-portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.char-portrait__initials { font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.char-portrait--poster { width: 100%; aspect-ratio: 2 / 3; border-radius: var(--radius-md); box-shadow: var(--poster-shadow); }
.char-portrait--poster .char-portrait__initials { font-size: clamp(2.5rem, 7vw, 5.5rem); }
.char-portrait--poster .char-portrait__name { position: absolute; inset: auto 12px 12px 12px; font-size: .8125rem; font-weight: 700; letter-spacing: .02em; color: var(--mp-mgla); }
.char-portrait--avatar { width: 56px; height: 56px; border-radius: 50%; }
.char-portrait--avatar::before { width: 100%; right: -45%; top: -45%; }
.char-portrait--avatar .char-portrait__initials { font-size: 1.125rem; }
.char-portrait--card { width: 100%; aspect-ratio: 4 / 5; border-radius: var(--radius-md); }
.char-portrait--card.has-image { box-shadow: var(--poster-shadow); }
/* Brak portretu w karcie: spokojne pole bez siatki i koła, mniejsze inicjały (imię stoi pod obrazem). */
.char-portrait--card:not(.has-image) { background: color-mix(in srgb, var(--mp-kobalt) 6%, var(--surface)); background-image: none; box-shadow: inset 0 0 0 1px var(--border); color: color-mix(in srgb, var(--text) 45%, transparent); }
.char-portrait--card:not(.has-image)::before { display: none; }
.char-portrait--card .char-portrait__initials { font-size: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); font-weight: 700; }
.tt-poster .char-portrait--poster { height: 100%; border-radius: 10px 0 0 10px; box-shadow: none; }
.tt-body:not(.tt-body--art) .tt-poster .char-portrait--poster { border-radius: 10px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .85); }
.tt-poster .char-portrait--poster .char-portrait__initials { font-size: clamp(3rem, 2rem + 5vw, 7rem); }
.char-hero .tt-media { align-items: stretch; }

/* Przełącznik: sama etykieta „Pokaż spoilery” i suwak, w miejscu statystyk karty anime. */
.spoiler-switch { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 8px 6px 18px; border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); color: var(--mp-biel); font-weight: 700; cursor: pointer; position: relative; transition: background .2s var(--ease), border-color .2s var(--ease); }
.spoiler-switch:hover { border-color: rgba(255, 255, 255, .4); }
.spoiler-switch:has(input:checked) { background: color-mix(in srgb, var(--mp-jesien) 22%, transparent); border-color: var(--mp-jesien); }
.spoiler-switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.spoiler-switch__track { width: 44px; height: 26px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .25); position: relative; flex: none; transition: background .2s var(--ease); }
.spoiler-switch__thumb { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--mp-biel); box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: translate .2s var(--ease); }
.spoiler-switch input:checked ~ .spoiler-switch__track { background: var(--mp-jesien); }
.spoiler-switch input:checked ~ .spoiler-switch__track .spoiler-switch__thumb { translate: 18px 0; }
.spoiler-switch:has(input:focus-visible) { outline: 3px solid var(--mp-link-ciemny); outline-offset: 3px; }
.spoiler-switch:has(input:disabled) { opacity: .55; cursor: default; }
.no-js .spoiler-control { display: none; }
@media (prefers-reduced-motion: reduce) { .spoiler-switch, .spoiler-switch__track, .spoiler-switch__thumb { transition: none; } }

.spoiler-tag { display: inline-flex; align-items: center; gap: 8px; width: fit-content; margin: 0 0 var(--space-2); padding: 3px 10px; border-radius: var(--radius-pill);
  background: var(--mp-jesien); color: var(--mp-biel); font-size: .6875rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.spoiler-tag span { font-weight: 600; letter-spacing: .02em; text-transform: none; opacity: .9; }
.spoiler-note { margin-top: var(--space-5); padding: var(--space-5); border-radius: var(--radius-lg); border: 1px solid color-mix(in srgb, var(--mp-jesien) 35%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--mp-jesien) 9%, var(--surface)), var(--surface) 70%); max-width: 860px; }
.spoiler-note h3 { margin: 0 0 var(--space-2); font-size: 1.1875rem; }
.spoiler-note .prose { font-size: 1rem; }

.char-body .title-section > .prose, .char-body .title-section > h2 { max-width: 760px; }
.char-facts { list-style: none; margin: 0; padding: 0; counter-reset: fact; display: grid; gap: var(--space-3); }
@media (min-width: 768px) { .char-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.char-facts li { counter-increment: fact; position: relative; padding: var(--space-4) var(--space-4) var(--space-4) 56px; border-radius: var(--radius-lg); background: var(--surface-2); line-height: 1.55; }
.char-facts li::before { content: counter(fact); position: absolute; left: var(--space-4); top: var(--space-4); width: 28px; height: 28px; display: grid; place-items: center;
  border-radius: 0 50% 50% 50%; background: var(--accent); color: var(--on-accent); font-weight: 800; font-size: .875rem; }
.char-relations .character { grid-template-columns: 56px minmax(0, 1fr); background: var(--surface); }
.char-relations .character__name a { color: var(--text); }
.character.is-spoiler { border-color: color-mix(in srgb, var(--mp-jesien) 45%, transparent); background: color-mix(in srgb, var(--mp-jesien) 6%, var(--surface)); }
.char-appearances { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5) var(--space-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .char-appearances { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .char-appearances { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.char-appearance { display: grid; gap: 6px; align-content: start; }
.char-appearance__link { position: relative; display: grid; gap: var(--space-3); color: var(--text); text-decoration: none; }
.char-appearance__link:hover .poster img { scale: 1.04; }
.char-appearance__title { font-size: 1rem; line-height: 1.35; }
.char-appearance__meta { font-size: .8125rem; color: var(--text-subtle); }
.spoiler-tag--on-poster { position: absolute; z-index: 2; top: 8px; left: 8px; margin: 0; }
.char-start { display: grid; padding: var(--space-6); border-radius: var(--radius-xl); background: var(--mp-granat); background-image: var(--grid-lines); background-size: 28px 28px; color: var(--mp-biel); position: relative; overflow: hidden; isolation: isolate; }
.char-start::before { content: ""; position: absolute; z-index: -1; width: 320px; aspect-ratio: 1; right: -90px; top: -110px; background: var(--mp-kobalt-500); border-bottom-left-radius: 100%; opacity: .9; }
.char-start h2 { color: var(--mp-biel); }
.char-start .prose { color: rgba(255, 255, 255, .86); max-width: 62ch; margin-bottom: var(--space-5); }
.char-start .btn--secondary { background: rgba(255, 255, 255, .08); color: var(--mp-biel); border-color: rgba(255, 255, 255, .3); }
.title-section.char-start + .title-section { margin-top: var(--space-8); }
.char-figure { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--space-3); align-items: center; padding: 8px; border-radius: 12px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); color: var(--mp-biel); text-decoration: none; }
.char-figure:hover { border-color: rgba(255, 255, 255, .4); }
.char-figure img { width: 64px; height: 64px; object-fit: contain; border-radius: 8px; background: var(--mp-biel); }
.char-figure span { display: grid; gap: 2px; }
.char-figure small { color: rgba(255, 255, 255, .65); }
.char-funko { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5) var(--space-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .char-funko { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .char-funko { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* Małe karty postaci (feedback właściciela 25.10.2026): siatka 6/5/4/3/2 przy 1200/1024/768/480 px, portret 4:5, imię
   i seria pod obrazem, bez przedstawienia. Cała karta to jeden link z jednym fokusem. Kolumny muszą odpowiadać
   mangapilot_char_grid_box() (sizes portretów). */
.char-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); }
@media (min-width: 480px) { .char-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 768px) { .char-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 20px; } }
@media (min-width: 1024px) { .char-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .char-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.char-card { min-width: 0; }
.char-card__link { display: grid; gap: 2px; align-content: start; color: var(--text); text-decoration: none; border-radius: var(--radius-md); }
.char-card__link .char-portrait { margin-bottom: 8px; transition: translate .3s var(--ease); }
.char-card__link:hover .char-portrait { translate: 0 -3px; }
.char-card__link:hover .char-card__name { color: var(--link); }
.char-card__link:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.char-card__name { margin: 0; font-size: 1rem; line-height: 1.3; letter-spacing: -.01em; overflow-wrap: break-word; }
.char-card__series { font-size: .8125rem; line-height: 1.4; color: var(--text-subtle); }
@media (prefers-reduced-motion: reduce) { .char-card__link .char-portrait { transition: none; } }

.series-start { margin-top: var(--space-2); padding: var(--space-5); border-radius: var(--radius-lg); background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); scroll-margin-top: calc(var(--header-h) + 72px); }
.series-start h2 { color: var(--mp-biel); font-size: 1.25rem; margin: 0 0 var(--space-2); }
.series-start__text { color: rgba(255, 255, 255, .86); line-height: 1.65; }
.series-start__text p + p { margin-top: var(--space-3); }
.series-cast { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3); }
.series-cast a { display: grid; justify-items: center; gap: 6px; width: 76px; color: var(--mp-biel); text-decoration: none; font-size: .8125rem; font-weight: 600; text-align: center; line-height: 1.25; }
.series-cast .char-portrait--avatar { width: 60px; height: 60px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .2); }
.series-cast a:hover .char-portrait { box-shadow: 0 0 0 2px var(--mp-biel); }
.series-body .title-section > .prose, .series-body .title-section > h2 { max-width: 760px; }
.series-body + .section { margin-top: 0; }
.series-anime { list-style: none; margin: 0; padding: 0; }
.series-anime > li { display: grid; gap: 6px; align-content: start; }
.series-anime__note { font-size: .8125rem; line-height: 1.45; color: var(--text-muted); }
.series-anime__kind { display: block; margin-bottom: 2px; font-size: .6875rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--link); }
.series-vod { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--border); }
.series-vod li { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: var(--space-4); align-items: center; padding-block: var(--space-3); border-bottom: 1px solid var(--border); }
.series-vod__title { font-weight: 700; color: var(--text); text-decoration: none; }
.series-vod__title:hover { color: var(--link); }
.series-vod__offers { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.series-vod__provider { display: grid; place-items: center; height: 36px; min-width: 84px; padding: 0 10px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); --logo-h: 18px; font-size: .8125rem; font-weight: 700; }
@media (max-width: 639.98px) { .series-vod li { grid-template-columns: 48px minmax(0, 1fr); } .series-vod__offers { grid-column: 2; justify-content: flex-start; } }
.series-guide { display: grid; gap: 4px; max-width: 760px; margin-top: var(--space-4); padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); border: 1px solid var(--border); text-decoration: none; color: var(--text); }
.series-guide:hover { border-color: var(--link); }
.series-guide strong { color: var(--link); font-size: 1.0625rem; }
.series-guide span { color: var(--text-muted); font-size: .9375rem; }
.series-faq { display: grid; gap: var(--space-2); max-width: 860px; }
.series-faq details { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.series-faq summary { cursor: pointer; padding: var(--space-4) var(--space-5); font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: var(--space-4); }
.series-faq summary::after { content: "+"; font-size: 1.25rem; line-height: 1; color: var(--link); }
.series-faq details[open] summary::after { content: "−"; }
.series-faq p { padding: 0 var(--space-5) var(--space-4); line-height: 1.65; color: var(--text-muted); }
/* Karty serii: siatka 4/3/3/2/1 przy 1200/1024/768/480 px, grafika zawsze 16:9 (bez zmiany kadru na telefonie), nazwa
   i krótka informacja pod nią, bez gradientu na grafice. Kolumny muszą odpowiadać mangapilot_series_grid_box(). */
.series-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5) var(--space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 480px) { .series-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px) { .series-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6) var(--space-5); } }
@media (min-width: 1200px) { .series-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.series-card { min-width: 0; }
.series-card__link { display: grid; gap: 2px; align-content: start; color: var(--text); text-decoration: none; border-radius: var(--radius-lg); }
.series-card__link:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.series-card__media { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; margin-bottom: 10px; overflow: hidden; border-radius: var(--radius-lg); background: var(--mp-granat); isolation: isolate; }
.series-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: scale .5s var(--ease); }
.series-card__link:hover .series-card__img { scale: 1.04; }
.series-card__media--plain { background: color-mix(in srgb, var(--mp-kobalt) 6%, var(--surface)); box-shadow: inset 0 0 0 1px var(--border); }
.series-card__media--plain::before { content: ""; width: 40px; height: 40px; background: url("../brand/mangapilot-mark-primary-color.svg") center / contain no-repeat; opacity: .45; }
.series-card__name { margin: 0; font-size: 1.125rem; font-weight: 800; line-height: 1.25; letter-spacing: -.01em; }
.series-card__link:hover .series-card__name { color: var(--link); }
.series-card__meta { font-size: .875rem; line-height: 1.4; color: var(--text-subtle); }
@media (prefers-reduced-motion: reduce) { .series-card__img { transition: none; } }

/* Przejście z serii do postaci: cały blok to jeden link; awatary 50 px zachodzą na siebie o 9 px. Desktop: tekst po
   lewej, akcja po prawej. Poniżej 768 px akcja na pełną szerokość, poniżej 480 px awatary nad nagłówkiem. */
.cast-cta { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-4) var(--space-5); margin-top: var(--space-7); padding: var(--space-5) var(--space-6); border-radius: var(--radius-lg); background: var(--surface-3); color: var(--text); text-decoration: none; }
.cast-cta:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.cast-cta__avatars { display: flex; padding-left: 9px; }
.cast-cta__avatars .char-portrait--avatar { width: 50px; height: 50px; margin-left: -9px; box-shadow: 0 0 0 2px var(--mp-biel); }
.cast-cta__text { display: grid; gap: 4px; min-width: 0; }
.cast-cta__title { margin: 0; font-size: 1.25rem; font-weight: 800; line-height: 1.25; letter-spacing: -.01em; color: var(--text); text-underline-offset: .18em; }
.cast-cta__lead { font-size: .9375rem; line-height: 1.5; color: var(--text-muted); }
.cast-cta__action { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 10px 22px; border-radius: var(--radius-sm); background: var(--accent); color: var(--on-accent); font-weight: 700; white-space: nowrap; transition: background-color .15s; }
.cast-cta__action svg { width: 18px; height: 18px; flex: none; }
.cast-cta:hover .cast-cta__title { text-decoration: underline; }
.cast-cta:hover .cast-cta__action { background: var(--accent-hover); }
@media (max-width: 767.98px) {
  .cast-cta { grid-template-columns: auto minmax(0, 1fr); padding: var(--space-5); }
  .cast-cta__action { grid-column: 1 / -1; }
}
@media (max-width: 479.98px) {
  .cast-cta { grid-template-columns: minmax(0, 1fr); }
  .cast-cta__title { font-size: 1.125rem; }
}

/* Szukanie w katalogu postaci: pole i wybór serii zamiast rzędów filtrów; na telefonie dwa wiersze. */
.char-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); max-width: 820px; margin-bottom: var(--space-3); }
.char-search__query { position: relative; grid-column: 1 / -1; }
.char-search__query .input { padding-left: 44px; }
.char-search__icon { position: absolute; left: 16px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; color: var(--text-subtle); pointer-events: none; }
.char-search__series { min-width: 0; }
.char-search__submit { min-height: 48px; }
@media (min-width: 640px) {
  .char-search { grid-template-columns: minmax(0, 1fr) minmax(0, 260px) auto; }
  .char-search__query { grid-column: auto; }
}
.char-search__status { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--space-4); margin-bottom: var(--space-5); }
.char-search__status .catalog-count { margin: 0; }
.char-search__clear { font-weight: 600; font-size: .9375rem; }
.search-series { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.search-series a { font-weight: 700; font-size: 1.125rem; }
.chips .chip[aria-current="page"] { border-color: var(--link); background: var(--surface-3); }
@media (max-width: 767.98px) {
  .char-hero .tt-top, .series-hero .tt-top { grid-template-columns: minmax(0, 1fr); }
  .char-start { padding: var(--space-5); }
}
/* Panel „Od czego zacząć?” z okładkami produkcji serii (wachlarz po prawej; na telefonie rząd nad tekstem). */
.char-start.has-covers { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: var(--space-6); align-items: center; }
.char-start.has-covers::before { display: none; }
.char-start.has-covers .char-start__text { grid-row: 1; grid-column: 1; }
.char-start__covers { grid-row: 1; grid-column: 2; position: relative; height: 240px; }
.char-start__covers > span { position: absolute; top: 50%; left: calc(var(--i) * 22%); width: 34%; translate: 0 -50%; rotate: calc((var(--i) - 1.5) * 5deg); transition: translate .3s var(--ease); }
.char-start__covers > span:nth-child(odd) { z-index: 2; }
.char-start__covers .poster { box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .8); }
.char-start:hover .char-start__covers > span { translate: 0 calc(-50% - 4px); }
@media (max-width: 899.98px) {
  .char-start.has-covers { grid-template-columns: minmax(0, 1fr); }
  .char-start__covers { grid-column: 1; height: 150px; }
  .char-start__covers > span { width: 26%; left: calc(var(--i) * 18%); }
  .char-start.has-covers .char-start__text { grid-row: 2; }
}
@media (prefers-reduced-motion: reduce) { .char-start__covers > span { transition: none; } }
/* Portret z oficjalnej grafiki (przezroczyste tło na kompozycji marki); awatar powiększa głowę. */
.char-portrait.has-image img { object-fit: contain; object-position: 50% 100%; }
.char-portrait--poster.has-image img, .char-portrait--card.has-image img { inset: 6% 0 0; height: 94%; }
.char-portrait--avatar.has-image img { object-fit: cover; object-position: 50% 0; scale: 2.3; transform-origin: 50% 4%; }
.char-portrait__credit { position: absolute; left: var(--space-3); right: var(--space-3); bottom: var(--space-3); width: fit-content; max-width: calc(100% - 2 * var(--space-3)); padding: 4px 10px; border-radius: 6px; background: rgba(14, 14, 17, .6); color: rgba(255, 255, 255, .85); font-size: .6875rem; line-height: 1.35; }
.char-card .char-portrait__credit { display: none; }
/* Telefon: portret ma ~90–140 px, więc podpis praw schodzi pod rząd portret + grafika jako mały pill, bez zasłaniania postaci. */
@media (max-width: 767.98px) {
  .char-hero .tt-body--art .tt-poster { display: contents; }
  .char-hero .char-portrait__credit { position: static; display: block; grid-area: 2 / 1 / auto / -1; justify-self: start; max-width: 100%; margin-top: 2px; padding: 3px 8px; overflow-wrap: anywhere; }
  .char-hero .tt-body:not(.tt-body--art) .char-portrait__credit { width: max-content; max-width: calc(100vw - 2 * var(--gutter)); margin-top: 8px; }
}

/* Punkt twarzy z rejestru: wspólna linia oczu i skala, niezależnie od pozy i pustego tła oryginału. */
.char-portrait.has-image.has-frame img {
  inset: auto; left: 50%; top: 36%; width: max(100%, var(--portrait-width)); height: auto; max-width: none;
  object-fit: initial; scale: none; transform: translate(calc(-1 * var(--portrait-x)), calc(-1 * var(--portrait-y)));
}
.char-portrait--avatar.has-image.has-frame img { top: 42%; width: var(--portrait-width); }
/* Zbliżenie w małym kole CTA: linia oczu w połowie, twarz wypełnia koło; czubek fryzury może zostać ucięty. */
.char-portrait--avatar.is-closeup.has-image.has-frame img { top: 50%; }
.char-portrait--avatar.is-closeup.has-image:not(.has-frame) img { scale: 3; transform-origin: 50% 8%; }
.char-portrait--card.has-image.has-frame img { top: 40%; }

/* Katalogi słownikowe A–Z: /postacie/ i /anime/ (wzorzec zaakceptowany 26.10.2026) ------------------------------- */
/* Pasek liter: 0–9, A–Z, #. Na telefonie przewija się wewnątrz, strona się nie poszerza; na desktopie mieści się cały. */
.az-letters { min-width: 0; margin-bottom: var(--space-4); }
.az-letters__list {
  list-style: none; margin: 0; padding: 3px; display: flex; gap: 2px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: thin;
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface);
}
.az-letters__list > li { flex: 1 0 auto; scroll-snap-align: start; }
.az-letters__item {
  position: relative; /* teksty dla czytników (visually-hidden, absolute) zostają w pasku i nie poszerzają strony */
  display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 6px;
  border-radius: var(--radius-sm); color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums;
  text-decoration: none; white-space: nowrap;
}
a.az-letters__item:hover { background: var(--surface-2); color: var(--link); }
.az-letters__item.is-current, .az-letters__item.is-current:hover { background: var(--text); color: var(--bg); }
.az-letters__item.is-empty { color: var(--text-subtle); opacity: .45; cursor: default; }
.az-letters__item:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
@media (min-width: 1024px) {
  .az-letters__list > li { flex: 1 1 0; }
  .az-letters__item { min-width: 0; padding: 0 2px; }
}

/* Nagłówki sekcji liter. */
.az-section__letter {
  display: flex; align-items: baseline; gap: 12px; margin: 0; padding: 0 12px 6px;
  border-bottom: 2px solid var(--accent); color: var(--accent);
  font-size: 1.3125rem; line-height: 1.2; font-weight: 800; letter-spacing: -.01em;
  scroll-margin-top: var(--space-4);
}
.az-section__letter:focus { outline: none; }
.az-section__cont { font-size: .8125rem; font-weight: 600; letter-spacing: 0; color: var(--text-subtle); }
@media (min-width: 1024px) { .az-section__letter { scroll-margin-top: calc(var(--header-h) + var(--space-4)); } }

/* Telefon: niższy nagłówek katalogu, żeby wyniki zaczynały się na pierwszym ekranie (treść wstępu bez zmian). */
@media (max-width: 767.98px) {
  .catalog-az__hero { padding-block: var(--space-2) var(--space-4); }
  .catalog-az__hero h1 { font-size: 2.125rem; }
  .catalog-az__hero .lead { font-size: 1rem; line-height: 1.55; }
}
.catalog-az .char-search__status { margin-bottom: var(--space-4); }

/* /postacie/: indeks tekstowy. Desktop: dwie kolumny jak indeks w książce (lewa od A, potem prawa), sekcja litery
   nie dzieli się między kolumny. Telefon: jedna kolumna. Cały wiersz to jeden link do profilu. */
.az-index { margin-bottom: var(--space-7); }
@media (min-width: 900px) { .az-index { columns: 2; column-gap: var(--space-7); column-rule: 1px solid var(--border); } }
.az-section { break-inside: avoid; padding-bottom: var(--space-4); }
.az-entries { list-style: none; margin: 0; padding: 0; }
.az-entry {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 16px; min-height: 48px; padding: 11px 12px;
  border-bottom: 1px solid var(--border); color: var(--text); text-decoration: none;
  transition: background-color .15s;
}
.az-entry__name { min-width: 0; font-size: 1.0625rem; line-height: 1.35; font-weight: 700; letter-spacing: -.005em; overflow-wrap: break-word; }
.az-entry__series { margin-left: auto; font-size: .875rem; line-height: 1.4; color: var(--text-subtle); text-align: right; }
.az-entry:hover { background: var(--surface-2); }
.az-entry:hover .az-entry__name { color: var(--link); }
.az-entry:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; border-radius: var(--radius-sm); }
@media (prefers-reduced-motion: reduce) { .az-entry { transition: none; } }

/* /anime/: sekcje liter, przełącznik widoku i zwarta lista z małymi okładkami. */
@media (max-width: 1023.98px) { .catalog-az .view-toggle button { width: 44px; height: 44px; } }
.catalog-az .results-bar { margin-bottom: var(--space-4); }
.az-section--anime { break-inside: auto; padding-bottom: var(--space-6); }
.az-section--anime .grid--catalog:not(.is-list) { margin-top: var(--space-4); }
.chip--letter { border-color: var(--accent); color: var(--link); }
.anime-card__status { font-weight: 600; color: var(--link); }
.anime-card__status--hiatus { color: var(--text-muted); }
.grid--catalog:not(.is-list) .anime-card__status { display: none; }
.grid--catalog.is-list { display: block; }
.grid--catalog.is-list .anime-card {
  grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: center;
  padding: 6px 60px 6px 12px; border-bottom: 1px solid var(--border);
  transition: background-color .15s;
}
.grid--catalog.is-list .anime-card:hover { background: var(--surface-2); }
.grid--catalog.is-list .poster { border-radius: 5px; box-shadow: none; }
.grid--catalog.is-list .poster__chip { display: none; }
.grid--catalog.is-list .anime-card:hover .anime-card__media, .grid--catalog.is-list .anime-card:focus-within .anime-card__media { translate: none; }
.grid--catalog.is-list .anime-card:hover .poster, .grid--catalog.is-list .anime-card:focus-within .poster { box-shadow: none; }
.grid--catalog.is-list .anime-card:hover .poster img { scale: 1; }
/* W liście pełny tytuł, bez wielokropka. */
.grid--catalog.is-list .anime-card__title { display: block; overflow: visible; font-size: 1.0625rem; line-height: 1.3; overflow-wrap: break-word; }
.grid--catalog.is-list .anime-card__meta--one { flex-wrap: wrap; overflow: visible; }
/* Cały wiersz to link do karty (::after tytułu); fokus pokazujemy na całym wierszu. */
.grid--catalog.is-list .anime-card__title a:focus-visible { outline: none; }
.grid--catalog.is-list .anime-card:has(.anime-card__title a:focus-visible) { outline: 3px solid var(--focus); outline-offset: -3px; border-radius: var(--radius-sm); }
/* Akcja listy: osobny link po linku karty (nie w nim), cel 44×44 px na końcu wiersza. W siatce leży w rogu okładki. */
.grid--catalog.is-list .list-add {
  top: 50%; right: 8px; left: auto; translate: 0 -50%; width: 44px; height: 44px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-muted);
}
.grid--catalog.is-list .list-add svg { width: 18px; height: 18px; }
.grid--catalog.is-list .list-add:hover, .grid--catalog.is-list .list-add.is-saved { border-color: var(--mp-kobalt-500); background: var(--mp-kobalt-500); color: var(--mp-biel); }
/* Desktop: metadane w stałych kolumnach (format, rok, długość, status), żeby wiersze dało się porównać wzrokiem. */
@media (min-width: 768px) {
  .grid--catalog.is-list .anime-card__body { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-5); }
  .grid--catalog.is-list .anime-card__meta { display: grid; grid-template-columns: 6.5rem 2.75rem 5.5rem 6.5rem; gap: 0 12px; font-size: .875rem; }
  .grid--catalog.is-list .anime-card__meta > * { white-space: normal; }
  .grid--catalog.is-list .anime-card__meta > ::after { content: none; }
  .grid--catalog.is-list .anime-card__meta > .anime-card__status { grid-column: 4; }
  .grid--catalog.is-list .anime-card__meta > :nth-child(2) { font-variant-numeric: tabular-nums; }
}
@media (prefers-reduced-motion: reduce) { .grid--catalog.is-list .anime-card { transition: none; } }

/* 8. MangaPilot -------------------------------------------------------------
   Dodatki do warstw AnimePilota: strona główna (wejścia do katalogów, wyróżnienie), źródła i notki.
   Jeden akcent marki: kolory sezonów AnimePilota nie oznaczają typów komiksu (plan, rozdz. 4). */
.nav-panel__icon--zima, .nav-panel__icon--wiosna, .nav-panel__icon--lato, .nav-panel__icon--jesien { --tone: var(--accent); --tone-ink: var(--accent); }

.mp-doors { display: grid; gap: var(--space-3); }
.mp-door { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--space-4); align-items: center; padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); color: var(--text); text-decoration: none; transition: border-color .2s var(--ease), background .2s var(--ease); }
.mp-door:hover, .mp-door:focus-visible { border-color: var(--border-strong); background: var(--surface-2); }
.mp-door strong { font-size: 1.375rem; }
.mp-door span { grid-column: 1; color: var(--text-muted); font-size: .9375rem; }
.mp-door svg { grid-column: 2; grid-row: 1 / span 2; width: 22px; height: 22px; color: var(--accent); }
.section--tight { padding-block: var(--space-5); }
@media (min-width: 600px) { .mp-doors { grid-template-columns: 1fr 1fr; } }

/* Hero: slajd premiery bez poziomej grafiki. Data na tle marki zamiast rozciągniętej okładki (plan, rozdz. 4). */
.hp-feat__media--release { display: grid; align-content: start; justify-items: end; padding: var(--space-6) calc(52px + var(--space-6)) var(--space-6) var(--space-6); background: radial-gradient(120% 120% at 100% 0%, var(--mp-kobalt-500) 0%, var(--mp-kobalt) 38%, var(--mp-granat) 100%); }
.hp-feat__media--release::after { display: none; }
.hp-release__blades { position: absolute; left: -6%; bottom: -30%; width: 62%; height: auto; fill: rgba(255, 255, 255, .07); transform: scaleX(-1); }
.hp-release { position: relative; display: grid; justify-items: end; gap: 2px; margin: 0; text-align: right; line-height: 1; }
.hp-release__label { font-size: .875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .78); }
.hp-release__day { font-size: clamp(4rem, 2rem + 7vw, 8.5rem); font-weight: 800; letter-spacing: -.04em; color: var(--mp-biel); }
.hp-release__month { font-size: clamp(1.5rem, 1rem + 1.6vw, 2.5rem); font-weight: 700; color: var(--mp-biel); }
@media (max-width: 599.98px) { .hp-feat__media--release { padding: var(--space-5) calc(40px + var(--space-4)) var(--space-5) var(--space-5); } }
.hp-next__when svg { padding: 4px; }

.mp-sources { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.mp-sources li { display: grid; gap: 2px; padding: var(--space-4) var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.mp-sources span { color: var(--text-muted); font-size: .9375rem; }
@media (min-width: 768px) { .mp-sources { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.media-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-4); }
.media-list > li { display: grid; gap: var(--space-2); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border); }
.mp-pl-note { color: var(--text-muted); font-size: .9375rem; }
@media (min-width: 768px) { .media-list > li { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); align-items: center; } }

.vod-row__logo--text { font-weight: 700; font-size: .8125rem; text-align: center; line-height: 1.2; padding: var(--space-2); }
.submission-form h2 { font-size: 1.375rem; }
.submission-form .cluster > .field { flex: 1 1 220px; }
/* Oferta bez logotypu: treść na całą szerokość, przycisk po prawej od 600 px. */
.vod-row--plain { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .vod-row--plain { grid-template-columns: minmax(0, 1fr) 168px; } .vod-row--plain .vod-row__cta { grid-column: auto; } }
/* Wiersz zgłoszenia (bez okładki): treść na całą szerokość, przycisk po prawej. */
.list-row[data-state] { grid-template-columns: minmax(0, 1fr) auto; }
.list-row[data-state] .list-row__meta { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
/* CTA dla twórców w nagłówku katalogu: długi tekst zawija się na telefonie zamiast wychodzić poza ekran. */
.catalog-az__hero .btn { white-space: normal; text-align: left; max-width: 100%; }
/* Podpis okładki pod plakatem w nagłówku karty (źródło grafiki zawsze widoczne). */
.tt-cover-credit { margin: var(--space-2) 0 0; font-size: .75rem; line-height: 1.4; color: var(--text-muted); }
.tt-cover-credit a { color: inherit; }

/* 9. Logotypy serwisów i wydawców ------------------------------------------------------------------------ */
/* Logotyp stoi obok nazwy (alt=""), nigdy zamiast niej. Bazowa wysokość z kontekstu (--logo-h), korekta optyczna
   z PHP (--logo-k), przełączanie wariantu jasny/ciemny: reguły .provider-logo w sekcji 4 (Gdzie obejrzeć). */
.vod-row__logo .provider-logo { max-height: 48px; }
.mp-sources li.mp-sources__item--logo { grid-template-columns: 96px minmax(0, 1fr); column-gap: var(--space-4); align-items: center; }
.mp-sources__logo { grid-row: span 2; display: grid; place-items: center; height: 56px; padding: 0 8px; border-radius: var(--radius-md); background: var(--surface-2); --logo-h: 26px; }
.mp-sources__logo .provider-logo { max-height: 44px; }
.source-hero__logo { display: grid; place-items: center; width: fit-content; min-width: 132px; height: 76px; padding: 10px 20px; border-radius: var(--radius-md); background: var(--surface-2); --logo-h: 36px; }
.source-hero__logo .provider-logo { max-height: 56px; }
@media (max-width: 559.98px) {
  .mp-sources li.mp-sources__item--logo { grid-template-columns: 80px minmax(0, 1fr); column-gap: var(--space-3); }
  .mp-sources__logo { height: 48px; --logo-h: 22px; }
}