/* Alapváltozók és első kirajzolási stabilitás. */
:root {
  color-scheme: dark;
  background: #111014;
  --color-background: #111014;
  --color-surface: #18161d;
  --color-surface-strong: #211e28;
  --color-text: #ffffff;
  --color-text-muted: #b9b4bf;
  --color-line: #ffffff;
  --color-navigation-active: #5d5068;
  --color-card-placeholder: #18161d;
  --cover-placeholder: var(--color-card-placeholder);
  --color-status-active: #16834a;
  --color-status-complete: #9b2437;
  --color-search-highlight: #38e878;
  --color-status-upcoming: #9b6500;
  --color-favorite-active: #d99a00;
  --line-width: 1px;
  --unit: 60px;
  --unit-half: 30px;
  --unit-sixth: 10px;
  --page-gutter: var(--unit-sixth);
  --control-height: var(--unit);
  --font-family: "Geist Mono", ui-monospace, "Cascadia Mono", "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --font-size-micro: 10px;
  --font-size-body: 14px;
  --font-size-heading: 18px;
  --transition-fast: 120ms;
  --layer-search: 10;
}
html, body { min-height: 100%; background: #111014; color: #ffffff; overflow-anchor: none; }

/* Minden dokumentumban pontosan egy főtartalom van. A belső navigáció
   ezt az elemet atomikusan cseréli, ezért nincs rejtési vagy staging réteg. */
[aria-busy="true"],
html[data-navigation-pending] {
  cursor: progress;
}

.navigation-message {
  position: fixed;
  right: var(--unit-sixth);
  bottom: var(--unit-sixth);
  z-index: calc(var(--layer-search) + 20);
  max-width: min(520px, calc(100vw - var(--unit-half)));
  margin: 0;
  padding: var(--unit-sixth);
  border: var(--line-width) solid var(--color-line);
  background: var(--color-status-complete);
  color: var(--color-text);
  font-size: var(--font-size-micro);
  font-weight: 700;
}

.navigation-message[hidden] {
  display: none;
}

.site-search__loading {
  display: flex;
  height: calc(var(--unit) * 2);
  align-items: center;
  padding-inline: var(--unit-sixth);
  color: var(--color-text-muted);
  font-weight: 700;
}

/* A hiányzó borító hálózati kérés nélkül, az első festésben készül el. */
.site-search__cover,
.detail-page__cover {
  position: relative;
}

.site-search__cover:not(.cover-surface--image)::before,
.anime-card__visual:not(.cover-surface--image)::before,
.detail-page__cover:not(.cover-surface--image)::before {
  position: absolute;
  inset: 0;
  display: block;
  background-color: var(--color-card-placeholder);
  background-image: repeating-linear-gradient(
    135deg,
    var(--color-card-placeholder) 0 20px,
    var(--color-surface-strong) 20px 21px,
    var(--color-card-placeholder) 21px 40px
  );
  content: "";
  pointer-events: none;
}

.cover-surface--image {
  background-color: var(--cover-placeholder, var(--color-card-placeholder));
}

.site-search__cover:not(.cover-surface--image)::after,
.anime-card__visual:not(.cover-surface--image)::after,
.detail-page__cover:not(.cover-surface--image)::after {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--unit-sixth);
  color: var(--color-text-muted);
  content: "CIPACTLI";
  font-size: var(--font-size-micro);
  font-weight: 700;
  letter-spacing: 0.12em;
  pointer-events: none;
  z-index: 0;
}

/* Billentyűzetes és csökkentett mozgású használat. */

.skip-link {
  position: fixed;
  top: var(--unit-sixth);
  left: var(--unit-sixth);
  z-index: calc(var(--layer-search) + 10);
  padding: var(--unit-sixth);
  border: var(--line-width) solid var(--color-line);
  background: var(--color-surface-strong);
  color: var(--color-text);
  font-weight: 700;
  transform: translateY(calc(-100% - var(--unit-half)));
}

.skip-link:focus-visible {
  transform: translateY(0);
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--color-search-highlight);
  outline-offset: -2px;
}

main[tabindex="-1"]:focus {
  outline: 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Alapelemek és tipográfia. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  overflow-y: scroll;
  scrollbar-gutter: stable;
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-family);
  font-size: var(--font-size-body);
  font-synthesis: auto;
  font-variant-numeric: lining-nums tabular-nums;
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  background: var(--color-background);
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
}

/* Oldalváz és közös elrendezés. */
.app-shell {
  min-height: 100vh;
  padding-inline: var(--page-gutter);
}

.top-spacer {
  height: var(--unit);
}

.site-footer {
  display: flex;
  min-height: calc(var(--unit) * 2);
  margin-top: var(--unit-sixth);
  align-items: center;
  justify-content: center;
  border-top: var(--line-width) solid var(--color-line);
}

.site-footer__text {
  color: var(--color-text-muted);
  font-size: var(--font-size-micro);
}

/* Elsődleges navigáció. */
.primary-navigation {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  height: var(--control-height);
  border: var(--line-width) solid var(--color-line);
  background: var(--color-surface);
}

.primary-navigation__link {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-right: var(--line-width) solid var(--color-line);
  font-weight: 700;
  white-space: nowrap;
  transition: background-color var(--transition-fast) linear;
}

.primary-navigation__link:last-child {
  border-right: 0;
}

.primary-navigation__link:hover {
  background: var(--color-surface-strong);
}

.primary-navigation__link[aria-current="page"] {
  background: var(--color-navigation-active);
}

@media (max-width: 700px) {
  .primary-navigation__link {
    font-size: var(--font-size-micro);
  }
}

/* Globális kereső. */
.site-search {
  position: relative;
  z-index: var(--layer-search);
  height: var(--control-height);
  border-inline: var(--line-width) solid var(--color-line);
  background: var(--color-surface);
}

.site-search::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: var(--line-width);
  background: var(--color-line);
  content: "";
  pointer-events: none;
}

.site-search__input {
  width: 100%;
  height: 100%;
  padding-inline: var(--unit-sixth);
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: var(--color-text);
}

.site-search__input::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

.site-search__input::-webkit-search-cancel-button {
  display: none;
}

.site-search__dropdown {
  position: absolute;
  top: 100%;
  right: calc(var(--line-width) * -1);
  left: calc(var(--line-width) * -1);
  border: var(--line-width) solid var(--color-line);
  border-top: 0;
  background: var(--color-surface);
}

.site-search__dropdown[hidden] {
  display: none;
}

.site-search__results {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-search__more {
  display: flex;
  width: 100%;
  min-height: var(--unit);
  align-items: center;
  justify-content: center;
  padding-inline: var(--unit-sixth);
  border: 0;
  border-top: var(--line-width) solid var(--color-line);
  background: var(--color-surface-strong);
  color: var(--color-text);
  cursor: pointer;
  font-size: var(--font-size-micro);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

.site-search__more:hover,
.site-search__more:focus-visible {
  background: var(--color-navigation-active);
}

.site-search__more[hidden] {
  display: none;
}

.site-search__result {
  position: relative;
  height: calc(var(--unit) * 2);
}

.site-search__result--separated::after {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: var(--line-width);
  background: var(--color-line);
  content: "";
  pointer-events: none;
}

.site-search__result-link {
  display: grid;
  width: 100%;
  height: 100%;
  min-width: 0;
  grid-template-columns: 80px minmax(0, 1fr);
  outline: 0;
  background: var(--color-surface);
  transition: background-color var(--transition-fast) linear;
  text-decoration: none;
}

.site-search__result-link:hover {
  background: var(--color-surface-strong);
}

.site-search__result-link[aria-selected="true"] {
  background: var(--color-navigation-active);
}

.site-search__cover {
  display: block;
  width: 80px;
  height: calc(var(--unit) * 2);
  overflow: hidden;
  border-right: var(--line-width) solid var(--color-line);
  background: var(--color-card-placeholder);
}

.site-search__cover-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.site-search__details {
  display: grid;
  min-width: 0;
  align-content: center;
  grid-template-rows: repeat(3, var(--unit-half));
}

.site-search__line {
  display: block;
  min-width: 0;
  height: var(--unit-half);
  padding-inline: var(--unit-sixth);
  overflow: hidden;
  line-height: var(--unit-half);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-search__title {
  font-weight: 700;
}

.site-search__original-title,
.site-search__genres,
.site-search__metadata {
  color: var(--color-text-muted);
  font-size: var(--font-size-micro);
  font-weight: 700;
}

.site-search__highlight {
  background: transparent;
  color: var(--color-search-highlight);
  font: inherit;
}

.site-search__empty {
  display: flex;
  height: calc(var(--unit) * 2);
  align-items: center;
  padding-inline: var(--unit-sixth);
  color: var(--color-text-muted);
  font-weight: 700;
}

.site-search__status {
  position: absolute;
  width: var(--line-width);
  height: var(--line-width);
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 700px) {
  .site-search__input {
    font-size: var(--font-size-micro);
  }

  .site-search__result-link {
    grid-template-columns: 80px minmax(0, 1fr);
  }
}

/* Animekártyák. */
.anime-card {
  display: grid;
  min-width: 0;
  grid-template-rows: auto var(--unit);
  border: var(--line-width) solid var(--color-line);
  background: var(--color-surface);
}

.anime-card__visual {
  position: relative;
  isolation: isolate;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-bottom: var(--line-width) solid var(--color-line);
  background: var(--color-card-placeholder);
}

.anime-card__cover {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: var(--cover-placeholder, var(--color-card-placeholder));
  object-fit: cover;
  object-position: center;
}

.anime-card__badge {
  position: absolute;
  display: flex;
  width: max-content;
  max-width: calc(100% - var(--unit-half));
  height: var(--unit-half);
  align-items: center;
  padding-inline: var(--unit-sixth);
  overflow: hidden;
  border: var(--line-width) solid var(--color-line);
  font-size: var(--font-size-micro);
  font-weight: 700;
  white-space: nowrap;
  z-index: 2;
}

.anime-card__status {
  top: calc(var(--line-width) * -1);
  right: calc(var(--line-width) * -1);
  background: var(--color-surface-strong);
}

/* A három állapotszín kizárólag a Kezdőlap, a Böngészés és a Kedvencek animekártyáin jelenik meg. */
.home-content .anime-card__status,
[data-page="bongeszes"] .anime-card__status,
[data-page="kedvencek"] .anime-card__status {
  background: var(--color-status-active);
}

.home-content .anime-card__status--upcoming,
[data-page="bongeszes"] .anime-card__status--upcoming,
[data-page="kedvencek"] .anime-card__status--upcoming {
  background: var(--color-status-upcoming);
}

.home-content .anime-card__status--complete,
[data-page="bongeszes"] .anime-card__status--complete,
[data-page="kedvencek"] .anime-card__status--complete {
  background: var(--color-status-complete);
}

.anime-card__meta {
  bottom: calc(var(--line-width) * -1);
  left: calc(var(--line-width) * -1);
  background: var(--color-surface-strong);
}

.anime-card__progress {
  right: calc(var(--line-width) * -1);
  bottom: calc(var(--line-width) * -1);
  background: var(--color-navigation-active);
}

.anime-card__title {
  display: flex;
  min-width: 0;
  margin: 0;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  font-size: 16px;
  font-weight: 700;
}

.anime-card__title-text {
  display: -webkit-box;
  width: 100%;
  max-height: var(--unit);
  padding-inline: var(--unit-sixth);
  overflow: hidden;
  line-height: var(--unit-half);
  text-align: left;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* Kártyagyűjtemények méretezése.
   SZABÁLY: minden normál .anime-card ugyanazt a központi szélességet használja
   azonos viewportnál. A fejléc keresőjének .site-search__cover képei külön,
   kis találati bélyegképek, ezért ez a szabály nem vonatkozik rájuk. */
.card-collection {
  contain: layout style;
  --card-base-width: var(--prepaint-card-base-width, 165px);
  --card-leading-width: var(--prepaint-card-leading-width, 165px);
}



/* Első megjelenítéshez stabil, a kártyaszámítóval egyező mobil szélességek. */
@media (max-width: 580px) {
  .card-collection {
    --card-base-width: calc((100vw - 30px) / 2);
    --card-leading-width: calc((100vw - 30px) / 2);
  }
}

@media (min-width: 581px) and (max-width: 800px) {
  .card-collection {
    --card-base-width: calc((100vw - 40px) / 3);
    --card-leading-width: calc((100vw - 40px) / 3);
  }
}
.card-collection [data-card-layout-item] {
  width: var(--card-base-width);
}

/* Gyűjteményoldalak közös elemei. */
.collection-page-content {
  padding-top: var(--unit);
}

.collection-page__heading {
  display: flex;
  height: var(--unit);
  align-items: center;
  justify-content: space-between;
  border-top: var(--line-width) solid var(--color-line);
}

.collection-page__title,
.collection-page__count {
  margin: 0;
  font-size: var(--font-size-heading);
  font-weight: 700;
}

.collection-page__filters {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  height: var(--unit);
  border: var(--line-width) solid var(--color-line);
  background: var(--color-surface);
}

.collection-page__filter {
  min-width: 0;
  padding: 0 var(--unit-sixth);
  overflow: hidden;
  border: 0;
  border-right: var(--line-width) solid var(--color-line);
  border-radius: 0;
  background: transparent;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.collection-page__filter:last-child {
  border-right: 0;
}

.collection-page__filter:hover {
  background: var(--color-surface-strong);
}

.collection-page__filter[aria-pressed="true"] {
  background: var(--color-navigation-active);
}

.collection-page__grid {
  display: flex;
  gap: var(--unit-sixth);
  flex-wrap: wrap;
  margin-top: var(--unit-sixth);
}

@media (max-width: 700px) {
  .collection-page__title,
  .collection-page__count {
    font-size: var(--font-size-body);
  }

  .collection-page__filter {
    padding-inline: 0;
    font-size: var(--font-size-micro);
  }
}

/* Kezdőlap. */
.home-content {
  padding-top: var(--unit);
}

.home-section + .home-section {
  margin-top: var(--unit-sixth);
}

.home-section__heading {
  display: flex;
  height: var(--unit);
  margin: 0;
  align-items: center;
  border-top: var(--line-width) solid var(--color-line);
  font-size: var(--font-size-heading);
  font-weight: 700;
}

.home-section__scroller {
  --hds-gap: var(--unit-sixth);

  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  touch-action: pan-x pan-y;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
  scroll-behavior: auto;
  /* Üres kártyasor esetén is pontosan egy kártya magasságát tartjuk meg.
     Így a kezdőlap ugyanúgy skálázódik, mintha legalább egy kártya lenne a sorban. */
  min-height: calc(
    var(--card-leading-width)
    + (var(--card-leading-width) / 2)
    + var(--unit)
  );
}

.home-section__scroller::-webkit-scrollbar {
  display: none;
}

.home-section__scroller .horizontal-scroller__track {
  display: flex;
  width: max-content;
  gap: var(--hds-gap);
  user-select: none;
}

.home-section__scroller .horizontal-scroller__item {
  flex: 0 0 auto;
}

.home-section__scroller.hds-is-dragging {
  cursor: grabbing;
}

.home-section__scroller.hds-is-dragging .horizontal-scroller__item {
  pointer-events: none;
}

@media (max-width: 700px) {
  .home-section__heading {
    font-size: var(--font-size-body);
  }
}

/* A böngésző találati területe akkor is legalább egy teljes animekártya
   magasságát tartja meg, ha az aktuális szűrés 0 találatot ad. */
.browse-page .collection-page__grid {
  min-height: calc(
    var(--card-leading-width)
    + (var(--card-leading-width) / 2)
    + var(--unit)
  );
}

.browse-page .collection-page__filters {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: var(--unit);
  overflow: visible;
  border: 0;
  background: transparent;
}

/* Széles nézet: az eredeti öt azonos szélességű cella egyetlen sorban marad. */
.browse-filters__toggle {
  display: none;
}

.browse-filters__body {
  display: grid;
  width: 100%;
  height: var(--unit);
  grid-template-columns: minmax(0, 4fr) minmax(0, 1fr);
}

.browse-filters__facets {
  display: grid;
  min-width: 0;
  height: var(--unit);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  order: 1;
}

.browse-filters__body > .collection-page__filter {
  order: 2;
}

.browse-dropdown {
  position: relative;
  min-width: 0;
  height: var(--unit);
  border: 0;
}

.browse-dropdown__trigger {
  width: 100%;
  height: 100%;
  padding: 0 var(--unit-sixth);
  overflow: hidden;
  border: 0;
  border-top: var(--line-width) solid var(--color-line);
  border-right: var(--line-width) solid var(--color-line);
  border-bottom: var(--line-width) solid var(--color-line);
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}


.browse-dropdown--start .browse-dropdown__trigger {
  border-left: var(--line-width) solid var(--color-line);
}

.browse-page .collection-page__filter {
  height: var(--unit);
  border-top: var(--line-width) solid var(--color-line);
  border-right: var(--line-width) solid var(--color-line);
  border-bottom: var(--line-width) solid var(--color-line);
}

.browse-dropdown__trigger:hover,
.browse-dropdown__trigger:focus-visible {
  background: var(--color-surface-strong);
}

.browse-dropdown[data-open="true"],
.browse-dropdown[data-open="true"] .browse-dropdown__panel {
  z-index: 4;
}

.browse-dropdown[data-open="true"] .browse-dropdown__trigger,
.browse-dropdown[data-has-selection] .browse-dropdown__trigger {
  background: var(--color-navigation-active);
}

/* Nyitott állapotban a gomb alsó kerete maradjon a görgethető panel fölött.
   A panel 1 vonalvastagsággal visszalóg a gomb alá a közös 60 px-es ritmus miatt,
   ezért a trigger saját rétegen rajzolja vissza a közös elválasztóvonalat. */
.browse-dropdown[data-open="true"] .browse-dropdown__trigger {
  position: relative;
  z-index: 5;
}

.browse-dropdown__panel {
  position: absolute;
  /* A lenyíló pontosan a szűrőcella méretét és tengelyét követi. */
  top: calc(100% - var(--line-width));
  left: 0;
  width: 100%;
  border: 0;
  background: var(--color-surface);
  box-shadow: 0 18px 28px rgba(0, 0, 0, .5);
}

/* A panel alsó kerete mindig a látható 5 sor alján marad, akkor is,
   ha a lista tovább görgethető és a tényleges utolsó elem lejjebb van. */
.browse-dropdown__panel::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  height: var(--line-width);
  background: var(--color-line);
  content: "";
  pointer-events: none;
}

.browse-dropdown--start .browse-dropdown__panel {
  right: auto;
  transform: none;
}

/* A középső cellák bal oldali elválasztóvonala az előző cella
   jobb szegélye. A panelt ezért pontosan egy vonalvastagsággal
   balra kell húzni, hogy a felső sarok is ugyanarra a pixelre essen. */
.browse-dropdown--middle .browse-dropdown__panel,
.browse-dropdown--end .browse-dropdown__panel {
  left: calc(-1 * var(--line-width));
  width: calc(100% + var(--line-width));
  right: auto;
  transform: none;
}

.browse-dropdown__panel[hidden] {
  display: none;
}

.browse-dropdown__options {
  max-height: calc(var(--unit) * 5);
  overflow-y: auto;
  overscroll-behavior: contain;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.browse-dropdown__options::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.browse-dropdown__option {
  display: flex;
  width: 100%;
  height: var(--unit);
  padding: 0 var(--unit-sixth);
  align-items: center;
  justify-content: space-between;
  gap: var(--unit-sixth);
  border: 0;
  border-top: var(--line-width) solid var(--color-line);
  border-right: var(--line-width) solid var(--color-line);
  border-left: var(--line-width) solid var(--color-line);
  border-radius: 0;
  background: var(--color-surface);
  color: var(--color-text);
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}


.browse-dropdown__option:hover,
.browse-dropdown__option:focus-visible {
  background: var(--color-surface-strong);
  outline: 0;
}

.browse-dropdown__option[aria-selected="true"] {
  background: var(--color-navigation-active);
}

.browse-dropdown__option-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.browse-dropdown__count {
  flex: 0 0 auto;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.browse-pagination {
  display: flex;
  height: var(--unit);
  margin-top: var(--unit-sixth);
  align-items: stretch;
  justify-content: center;
}

.browse-pagination__button,
.browse-pagination__page {
  display: flex;
  min-width: var(--unit);
  padding-inline: var(--unit-sixth);
  align-items: center;
  justify-content: center;
  border: var(--line-width) solid var(--color-line);
  background: var(--color-surface);
  font-weight: 700;
}

.browse-pagination__button + .browse-pagination__page,
.browse-pagination__page + .browse-pagination__button {
  border-left: 0;
}

.browse-pagination__button:disabled {
  color: var(--color-text-muted);
  cursor: default;
}

/* Keskeny nézet: ezt nem fix CSS breakpoint kapcsolja be, hanem a JS akkor,
   amikor az egysoros szűrő legszélesebb valós értéke + darabszáma már nem fér el. */
.browse-page[data-browse-compact="true"] .collection-page__filters {
  height: var(--unit);
}

.browse-page[data-browse-compact="true"] .collection-page__filters[data-open] {
  height: calc(var(--unit) * 4);
}

.browse-page[data-browse-compact="true"] .browse-filters__toggle {
  position: relative;
  display: flex;
  width: 100%;
  height: var(--unit);
  padding: 0 var(--unit-sixth);
  align-items: center;
  justify-content: center;
  border: var(--line-width) solid var(--color-line);
  border-radius: 0;
  background: var(--color-surface);
  color: var(--color-text);
  font-weight: 700;
  cursor: pointer;
}

.browse-page[data-browse-compact="true"] .collection-page__filters[data-open] .browse-filters__toggle {
  background: var(--color-navigation-active);
}

.browse-filters__chevron {
  position: absolute;
  right: calc(var(--unit-sixth) + 2px);
  width: 8px;
  height: 8px;
  border-right: var(--line-width) solid var(--color-text-muted);
  border-bottom: var(--line-width) solid var(--color-text-muted);
  transform: translateY(-2px) rotate(45deg);
  transform-origin: 50% 50%;
}

.browse-page[data-browse-compact="true"] .collection-page__filters[data-open] .browse-filters__chevron {
  transform: translateY(2px) rotate(225deg);
}

.browse-page[data-browse-compact="true"] .browse-filters__body {
  display: none;
  width: 100%;
  height: calc(var(--unit) * 3);
  grid-template-columns: none;
}

.browse-page[data-browse-compact="true"] .collection-page__filters[data-open] .browse-filters__body {
  display: block;
}

.browse-page[data-browse-compact="true"] .browse-filters__body > .collection-page__filter {
  display: block;
  width: 100%;
  height: var(--unit);
  padding: 0 var(--unit-sixth);
  border: 0;
  border-right: var(--line-width) solid var(--color-line);
  border-bottom: var(--line-width) solid var(--color-line);
  border-left: var(--line-width) solid var(--color-line);
  background: var(--color-surface);
  font-size: inherit;
}

.browse-page[data-browse-compact="true"] .browse-filters__facets {
  display: grid;
  width: 100%;
  height: calc(var(--unit) * 2);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, var(--unit));
}

.browse-page[data-browse-compact="true"] .browse-dropdown {
  width: 100%;
  height: var(--unit);
}

.browse-page[data-browse-compact="true"] .browse-dropdown__trigger {
  padding: 0 var(--unit-sixth);
  border: 0;
  border-right: var(--line-width) solid var(--color-line);
  border-bottom: var(--line-width) solid var(--color-line);
  background: var(--color-surface);
  font-size: inherit;
}

.browse-page[data-browse-compact="true"] .browse-dropdown:nth-child(odd) .browse-dropdown__trigger {
  border-left: var(--line-width) solid var(--color-line);
}

.browse-page[data-browse-compact="true"] .browse-dropdown[data-open="true"] .browse-dropdown__trigger,
.browse-page[data-browse-compact="true"] .browse-dropdown[data-has-selection] .browse-dropdown__trigger {
  background: var(--color-navigation-active);
}

/* A keskeny 2×2 rácsban minden lenyíló pontosan a saját féloszlopát követi. */
.browse-page[data-browse-compact="true"] .browse-dropdown--start .browse-dropdown__panel,
.browse-page[data-browse-compact="true"] .browse-dropdown--middle .browse-dropdown__panel,
.browse-page[data-browse-compact="true"] .browse-dropdown--end .browse-dropdown__panel {
  top: calc(100% - var(--line-width));
  right: auto;
  left: 0;
  width: 100%;
  transform: none;
}

.browse-page[data-browse-compact="true"] .browse-dropdown__option {
  font-size: var(--font-size-body);
}

@media (max-width: 700px) {
  .browse-page:not([data-browse-compact="true"]) .browse-dropdown__trigger {
    font-size: var(--font-size-micro);
  }
}

/* Kedvencek oldal. */
/* A kedvencek tartalomterülete legalább egy teljes kártyasor magasságát
   megtartja akkor is, ha nincs vagy a szűrés miatt nem látszik kártya. */
.favorites-page .collection-page__grid {
  min-height: calc(
    var(--card-leading-width)
    + (var(--card-leading-width) / 2)
    + var(--unit)
    + var(--unit)
    - var(--line-width)
  );
}

.favorite-entry[hidden] {
  display: none;
}

.favorite-entry {
  display: grid;
  min-width: 0;
}

.favorite-entry__row {
  display: flex;
  height: var(--unit);
  align-items: center;
  justify-content: center;
  border: 0;
  border-inline: var(--line-width) solid var(--color-line);
  border-bottom: var(--line-width) solid var(--color-line);
  background: var(--color-navigation-active);
  font-weight: 700;
}

.favorite-entry__remove {
  width: 100%;
  padding: 0;
  cursor: pointer;
}

.favorite-entry__remove:hover {
  background: var(--color-surface-strong);
}

/* Anime adatlap. */
.detail-page-content {
  padding-top: var(--unit);
}

.detail-page__heading {
  display: flex;
  height: var(--unit);
  align-items: center;
  justify-content: space-between;
  border-top: var(--line-width) solid var(--color-line);
}

.detail-page__heading-title,
.detail-episodes__title,
.detail-episodes__count {
  margin: 0;
  font-size: var(--font-size-heading);
  font-weight: 700;
}

.detail-page__control {
  width: 100%;
  height: var(--unit);
  padding: 0 var(--unit-sixth);
  border: var(--line-width) solid var(--color-line);
  border-radius: 0;
  background: var(--color-navigation-active);
  font-weight: 700;
  cursor: pointer;
}

.detail-page__favorite[aria-pressed="true"] {
  background: var(--color-favorite-active);
}

.detail-page__layout {
  --detail-cover-width: var(--card-leading-width);

  display: grid;
  height: calc((var(--detail-cover-width) * 1.5) + var(--unit));
  margin-top: var(--unit-sixth);
  grid-template-areas:
    "cover story"
    "cover metadata";
  grid-template-columns: var(--detail-cover-width) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) calc(var(--unit) * 4);
  column-gap: var(--unit-sixth);
}

.detail-page__cover-column {
  display: grid;
  min-width: 0;
  align-self: start;
  grid-area: cover;
  grid-template-rows: auto var(--unit);
}

.detail-page__cover {
  width: 100%;
  min-height: 0;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border: var(--line-width) solid var(--color-line);
  background: var(--color-card-placeholder);
}

.detail-page__cover-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail-page__cover-column .detail-page__continue {
  border-top: 0;
}

.detail-page__control:disabled {
  color: var(--color-text-muted);
  cursor: default;
}

.detail-page__title-box {
  min-width: 0;
  height: var(--unit);
  margin-top: var(--unit-sixth);
  border: var(--line-width) solid var(--color-line);
  background: var(--color-surface);
}

.detail-page__titles {
  display: flex;
  width: 100%;
  height: 100%;
  min-width: 0;
  padding: 6px var(--unit-sixth);
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  overflow: hidden;
}

.detail-page__title {
  margin: 0;
  overflow: hidden;
  font-size: 20px;
  line-height: 22px;
  font-weight: 700;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-page__original-title {
  margin: 0;
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: var(--font-size-micro);
  line-height: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-page__heading-score {
  display: flex;
  height: 100%;
  align-items: center;
  gap: var(--unit-sixth);
  font-size: var(--font-size-heading);
  font-weight: 700;
}

.detail-page__score-value,
.detail-page__score-label {
  font-size: inherit;
}

.detail-page__score-label {
  color: var(--color-text-muted);
}

.detail-page__story {
  position: relative;
  min-width: 0;
  min-height: 0;
  padding: var(--unit-sixth);
  overflow: hidden;
  grid-area: story;
  border: var(--line-width) solid var(--color-line);
  background: var(--color-surface);
}

.detail-page__story[data-expandable="true"] {
  padding-bottom: calc(var(--unit-half) + var(--unit-sixth));
}

.detail-page__story[data-expanded="true"] {
  height: max-content;
  min-height: 100%;
  align-self: start;
  overflow: visible;
  z-index: 20;
}

.detail-page__story-title {
  margin: 0;
  font-size: var(--font-size-body);
  font-weight: 700;
}

.detail-page__story-text {
  margin: var(--unit-sixth) 0 0;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.detail-page__story-toggle {
  position: absolute;
  right: 2px;
  bottom: 2px;
  display: none;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
}

.detail-page__story-toggle::before {
  position: absolute;
  top: 50%;
  left: 6px;
  width: 4px;
  height: 4px;
  background: currentColor;
  box-shadow: 7px 0 0 currentColor, 14px 0 0 currentColor;
  content: "";
  transform: translateY(-50%);
}

.detail-page__story[data-expandable="true"] .detail-page__story-toggle {
  display: block;
}

.detail-page__story-toggle:hover,
.detail-page__story-toggle:focus-visible {
  color: var(--color-text);
  outline: none;
}

.detail-page__metadata {
  display: grid;
  min-width: 0;
  margin: 0;
  grid-area: metadata;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(4, var(--unit));
  border-left: var(--line-width) solid var(--color-line);
  background: var(--color-surface);
}

.detail-page__metadata-item {
  display: flex;
  min-width: 0;
  height: var(--unit);
  padding: var(--unit-sixth);
  justify-content: center;
  overflow: hidden;
  border-right: var(--line-width) solid var(--color-line);
  border-bottom: var(--line-width) solid var(--color-line);
  flex-direction: column;
}

.detail-page__metadata-item dt {
  margin: 0;
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: var(--font-size-micro);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-page__metadata-item dd {
  margin: var(--unit-sixth) 0 0;
  overflow: hidden;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.detail-episodes {
  margin-top: var(--unit-sixth);
}

.detail-episodes__heading {
  display: flex;
  height: var(--unit);
  align-items: center;
  justify-content: space-between;
  border-top: var(--line-width) solid var(--color-line);
}

.detail-episode-row {
  height: var(--unit);
  border-inline: var(--line-width) solid var(--color-line);
  border-bottom: var(--line-width) solid var(--color-line);
  background: var(--color-surface);
}

.detail-episode-row:first-child {
  border-top: var(--line-width) solid var(--color-line);
}

.detail-episode-row__action {
  display: flex;
  width: 100%;
  height: 100%;
  min-width: 0;
  padding: 6px var(--unit-sixth);
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.detail-episode-row__action:hover,
.detail-episode-row__action:focus-visible {
  background: var(--color-surface-strong);
}

.detail-episode-row__number {
  width: 100%;
  overflow: hidden;
  font-weight: 700;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-episode-row__episode-title {
  width: 100%;
  overflow: hidden;
  color: var(--color-text-muted);
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-episode-row[data-watched="true"] .detail-episode-row__action,
.detail-episode-row[data-watched="true"] .detail-episode-row__action:hover,
.detail-episode-row[data-watched="true"] .detail-episode-row__action:focus-visible {
  background: var(--color-status-active);
}

@media (max-width: 900px) {
  .detail-page__layout {
    height: calc((var(--detail-cover-width) * 1.5) + var(--unit) + (var(--unit) * 4) + var(--unit-sixth));
    grid-template-areas:
      "cover story"
      "metadata metadata";
    grid-template-columns: var(--detail-cover-width) minmax(0, 1fr);
    grid-template-rows: calc((var(--detail-cover-width) * 1.5) + var(--unit)) calc(var(--unit) * 4);
    gap: var(--unit-sixth);
  }

  .detail-page__metadata {
    border-top: var(--line-width) solid var(--color-line);
  }

}

@media (max-width: 700px) {
  .detail-page__heading-title,
  .detail-page__heading-score,
  .detail-episodes__title,
  .detail-episodes__count {
    font-size: var(--font-size-body);
  }

  .detail-page__title {
    font-size: 16px;
  }

  .detail-page__metadata-item dd,
  .detail-page__story-text {
    font-size: 12px;
  }
}

/* Támogatási oldal. */
.support-page-content {
  padding-top: var(--unit);
}

.support-page__heading {
  display: flex;
  height: var(--unit);
  align-items: center;
  border-top: var(--line-width) solid var(--color-line);
}

.support-page__heading-title {
  margin: 0;
  font-size: var(--font-size-heading);
  font-weight: 700;
}

.support-page__hero {
  display: grid;
  height: calc(var(--unit) * 4);
  grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr);
}

.support-page__hero-copy {
  display: flex;
  min-width: 0;
  height: calc(var(--unit) * 4);
  padding: var(--unit-half);
  border: var(--line-width) solid var(--color-line);
  background: var(--color-surface);
  justify-content: center;
  flex-direction: column;
}

.support-page__eyebrow {
  margin: 0 0 var(--unit-sixth);
  color: var(--color-text-muted);
  font-size: var(--font-size-micro);
  font-weight: 700;
}

.support-page__hero-title {
  max-width: 900px;
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
}

.support-page__hero-text {
  max-width: 820px;
  margin: var(--unit-half) 0 0;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.support-page__scope {
  display: grid;
  margin: 0;
  grid-template-rows: repeat(4, var(--unit));
}

.support-page__scope-row {
  display: grid;
  height: var(--unit);
  align-items: center;
  grid-template-columns: var(--unit) minmax(0, 1fr);
  border-right: var(--line-width) solid var(--color-line);
  border-bottom: var(--line-width) solid var(--color-line);
  background: var(--color-surface);
}

.support-page__scope-row:first-child {
  border-top: var(--line-width) solid var(--color-line);
}

.support-page__scope-row dt {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  border-right: var(--line-width) solid var(--color-line);
  color: var(--color-text-muted);
}

.support-page__scope-row dd {
  margin: 0;
  padding-inline: var(--unit-sixth);
  font-weight: 700;
}

.support-page__columns {
  display: grid;
  margin-top: var(--unit-sixth);
  align-items: stretch;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--unit-sixth);
}

.support-page__panel {
  display: grid;
  min-width: 0;
  grid-template-rows: var(--unit) minmax(0, 1fr);
}

.support-page__panel-title {
  display: flex;
  height: var(--unit);
  margin: 0;
  padding-inline: var(--unit-sixth);
  align-items: center;
  border: var(--line-width) solid var(--color-line);
  background: var(--color-surface);
  font-size: var(--font-size-heading);
  font-weight: 700;
}

.support-page__actions {
  margin: 0;
  padding: 0;
  list-style: none;
}

.support-page__action-row {
  display: grid;
  height: calc(var(--unit) * 2);
  grid-template-columns: var(--unit) minmax(0, 1fr);
  border-right: var(--line-width) solid var(--color-line);
  border-bottom: var(--line-width) solid var(--color-line);
  border-left: var(--line-width) solid var(--color-line);
  background: var(--color-surface);
}

.support-page__number {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  border-right: var(--line-width) solid var(--color-line);
  color: var(--color-text-muted);
}

.support-page__action-copy {
  display: flex;
  min-width: 0;
  overflow: hidden;
  padding: var(--unit-sixth) 20px;
  justify-content: center;
  flex-direction: column;
}

.support-page__action-copy strong {
  font-weight: 700;
}

.support-page__action-copy span {
  margin-top: var(--unit-sixth);
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.5;
}

.support-page__funding {
  display: flex;
  height: calc(var(--unit) * 3);
  overflow: hidden;
  padding: var(--unit-half);
  align-items: center;
  justify-content: center;
  border-right: var(--line-width) solid var(--color-line);
  border-bottom: var(--line-width) solid var(--color-line);
  border-left: var(--line-width) solid var(--color-line);
  background: var(--color-surface);
  text-align: center;
  flex-direction: column;
}

.support-page__funding-status {
  font-size: var(--font-size-heading);
  font-weight: 700;
}

.support-page__funding-text {
  max-width: 560px;
  margin: var(--unit-half) 0 0;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.support-page__principles {
  margin: 0;
}

.support-page__principle-row {
  display: grid;
  height: var(--unit);
  align-items: center;
  grid-template-columns: 140px minmax(0, 1fr);
  border-right: var(--line-width) solid var(--color-line);
  border-bottom: var(--line-width) solid var(--color-line);
  border-left: var(--line-width) solid var(--color-line);
  background: var(--color-surface);
}

.support-page__principle-row dt {
  display: flex;
  height: 100%;
  margin: 0;
  padding-inline: var(--unit-sixth);
  align-items: center;
  border-right: var(--line-width) solid var(--color-line);
  color: var(--color-text-muted);
}

.support-page__principle-row dd {
  min-width: 0;
  margin: 0;
  padding-inline: var(--unit-sixth);
  font-size: 12px;
  font-weight: 700;
}

.support-page__closing {
  display: flex;
  height: var(--unit);
  margin: var(--unit-sixth) 0 0;
  padding-inline: var(--unit-sixth);
  align-items: center;
  justify-content: center;
  border: var(--line-width) solid var(--color-line);
  background: var(--color-navigation-active);
  font-weight: 700;
  text-align: center;
}

@media (max-width: 700px) {
  .support-page__heading-title {
    font-size: var(--font-size-body);
  }

  .support-page__hero {
    height: auto;
    grid-template-columns: 1fr;
  }

  .support-page__hero-copy {
    height: calc(var(--unit) * 4);
  }

  .support-page__hero-title {
    font-size: var(--font-size-heading);
  }

  .support-page__scope-row {
    border-left: var(--line-width) solid var(--color-line);
  }

  .support-page__scope-row:first-child {
    border-top: 0;
  }

  .support-page__columns {
    grid-template-columns: 1fr;
  }

  .support-page__panel-title {
    font-size: var(--font-size-body);
  }

  .support-page__action-copy {
    padding-inline: var(--unit-sixth);
  }

  .support-page__principle-row {
    grid-template-columns: 110px minmax(0, 1fr);
  }

  .support-page__principle-row dd {
    font-size: var(--font-size-micro);
  }

  .support-page__closing {
    height: calc(var(--unit) * 2);
  }
}

.smart-page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.smart-page-link[aria-disabled="true"] {
  opacity: 0.35;
  pointer-events: none;
}

.favorite-entry .anime-card {
  width: 100%;
}

.home-section__scroller.hds-is-dragging * {
  cursor: grabbing;
}

.home-section__scroller.hds-is-dragging,
.home-section__scroller.hds-is-inertia,
.home-section__scroller.hds-is-settling {
  scroll-snap-type: none;
}

/* Interakciós és végső felületi állapotok. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.collection-page__filter:disabled {
  color: var(--color-text-muted);
  cursor: default;
  opacity: .65;
}