/* Šriftai (Google Fonts) įkeliami views/partials/head.php per <link>. */

:root {
  --ink: #0d0b09;
  --ink-raised: #18140f;
  --ink-raised-2: #221c14;
  --ink-border: #322a1f;
  --paper: #f3ede1;
  --paper-dim: #a89a86;
  --paper-faint: #6b6153;
  --vermillion: #e2432a;
  --vermillion-bright: #ff6a45;
  --vermillion-dim: #4a1c14;
  --gold: #c9a355;
  --status-ongoing: #6fae8c;
  --status-released: #a89a86;
  --status-anons: #c9a355;
  --font-display: 'Shippori Mincho B1', serif;
  --font-body: 'Zen Kaku Gothic New', sans-serif;
  --grain-opacity: 0.05;
  /* Lipnios (sticky) antraštės aukštis + tarpas - pagal jį lygiuojami kiti
     sticky blokai; planšetėse antraštė dviejų eilučių (žr. .site-header). */
  --header-offset: 84px;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  min-height: 100vh;
  position: relative;
}

/* film-grain texture overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

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

img {
  max-width: 100%;
  display: block;
}

::selection {
  background: var(--vermillion);
  color: var(--paper);
}

/* ---------- Custom scrollbar (VISUR svetainėje - vienodas dizainas kiekvienam
   slenkančiam elementui, ne tik atskirai išvardintiems, kad niekur neliktų
   numatytosios naršyklės juostos) ---------- */

html {
  scrollbar-width: thin;
  scrollbar-color: var(--vermillion-dim) transparent;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: var(--vermillion-dim);
  border-radius: 999px;
  border: 2px solid var(--ink);
}

*:hover::-webkit-scrollbar-thumb {
  background: var(--vermillion);
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 1.1rem clamp(1.25rem, 4vw, 3.5rem);
  background: rgba(13, 11, 9, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ink-border);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-shrink: 0;
}

.brand-stamp {
  width: 40px;
  height: 40px;
  border-radius: 46% 54% 52% 48% / 48% 44% 56% 52%;
  background: var(--vermillion);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  transform: rotate(-4deg);
  box-shadow: 0 2px 12px rgba(226, 67, 42, 0.35);
  flex-shrink: 0;
}

.brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: 0.14em;
}

.brand-sub {
  display: block;
  font-family: var(--font-body);
  font-size: 0.6rem;
  letter-spacing: 0.28em;
  color: var(--paper-dim);
  font-weight: 500;
  margin-top: 0.15rem;
}

.search-form {
  flex: 1;
  max-width: 460px;
  position: relative;
}

.search-form input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--ink-border);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 0.5rem 0.25rem;
  transition: border-color 0.25s ease;
}

.search-form input:focus {
  outline: none;
  border-bottom-color: var(--vermillion);
}

.search-form input::placeholder {
  color: var(--paper-faint);
}

.search-suggestions {
  display: none;
  position: absolute;
  top: calc(100% + 0.6rem);
  left: 0;
  right: 0;
  background: var(--ink-raised);
  border: 1px solid var(--ink-border);
  border-radius: 8px;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  z-index: 200;
  max-height: 70vh;
  overflow-y: auto;
}

.search-suggestions.open {
  display: block;
}

.suggestion-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.9rem;
  border-bottom: 1px solid var(--ink-border);
}

.suggestion-item:last-child {
  border-bottom: none;
}

.suggestion-item:hover,
.suggestion-item.active {
  background: var(--ink-raised-2);
}

.suggestion-poster {
  flex-shrink: 0;
  width: 32px;
  height: 44px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--ink-raised-2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.suggestion-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.suggestion-noimg {
  color: var(--vermillion);
  font-family: var(--font-display);
  font-size: 0.8rem;
}

.suggestion-title {
  font-size: 0.85rem;
  color: var(--paper);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-tabs {
  display: flex;
  gap: 0.35rem;
  margin-left: auto;
  flex-shrink: 0;
}

.status-tabs a {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--ink-border);
  color: var(--paper-dim);
  white-space: nowrap;
  transition: all 0.2s ease;
}

.status-tabs a:hover {
  border-color: var(--paper-dim);
  color: var(--paper);
}

.status-tabs a.active {
  background: var(--vermillion);
  border-color: var(--vermillion);
  color: var(--ink);
  font-weight: 700;
}

/* ---------- TOP puslapio tab'ai (reuse .status-tabs, tik be header konteksto) ---------- */

.top-tabs {
  margin-bottom: 1.5rem;
}

/* ---------- Random anime mygtukas ---------- */

.random-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--ink-border);
  color: var(--paper-dim);
  font-size: 0.78rem;
  font-weight: 700;
  flex-shrink: 0;
  white-space: nowrap;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.random-btn:hover {
  border-color: var(--vermillion);
  color: var(--vermillion-bright);
}

/* ---------- Page shell ---------- */

.page {
  max-width: 1400px;
  margin: 0 auto;
  padding: 2.5rem clamp(1.25rem, 4vw, 3.5rem) 5rem;
}

.page-heading {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--ink-border);
  padding-bottom: 1.25rem;
}

.page-heading h1 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  margin: 0;
}

.page-heading .count {
  font-size: 0.85rem;
  color: var(--paper-faint);
  font-variant-numeric: tabular-nums;
}

.sort-select {
  margin-left: auto;
  background: var(--ink-raised);
  border: 1px solid var(--ink-border);
  color: var(--paper-dim);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.5rem 2.2rem 0.5rem 0.9rem;
  border-radius: 6px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a89a86' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 12px 8px;
}

.sort-select:hover,
.sort-select:focus {
  border-color: var(--vermillion-dim);
  outline: none;
}

.sort-select option {
  background: var(--ink-raised);
  color: var(--paper);
}

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: -0.5rem 0 1.75rem;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.76rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: var(--ink-raised);
  border: 1px solid var(--ink-border);
  color: var(--paper-dim);
  transition: border-color 0.2s ease, color 0.2s ease;
}

.filter-chip:hover {
  border-color: var(--vermillion);
  color: var(--paper);
}

.filter-chip .chip-x {
  color: var(--vermillion-bright);
  font-weight: 700;
}

.filter-chip-clear {
  color: var(--vermillion-bright);
  border-color: var(--vermillion-dim);
}

/* ---------- Catalog layout (sidebar + main) ---------- */

.catalog-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
  min-width: 0;
}

.main-content {
  min-width: 0;
}

@media (min-width: 900px) {
  .catalog-layout {
    grid-template-columns: 220px 1fr;
  }
  .schedule-column {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1300px) {
  .catalog-layout {
    grid-template-columns: 220px 1fr 280px;
  }
  .schedule-column {
    grid-column: auto;
  }
}

.genre-sidebar {
  position: static;
}

/* Mobiliajame filtrų turinys (Тип/Жанры/Дополнительные фильтры - iš viso apie
   90 nuorodų) pagal nutylėjimą suskleistas po "Фильтры" mygtuku, kad
   neužstotų viso ekrano prieš pasiekiant patį katalogą. Nuo 900px ir
   plačiau - checkbox/label paslėpti, turinys visada matomas kaip anksčiau
   (be jokio elgsenos pokyčio darbalaukyje). Grynas CSS, be JS. */
.filter-toggle-checkbox {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Paslėptas checkbox'as lieka pasiekiamas klaviatūra - fokusas rodomas ant
   matomo "Фильтры" mygtuko. Darbalaukyje jis nereikalingas (turinys visada
   matomas), tad ten pašalinamas, kad nebūtų nematomo Tab sustojimo. */
.filter-toggle-checkbox:focus-visible + .filter-toggle-label {
  outline: 2px solid var(--vermillion-bright);
  outline-offset: 2px;
}

@media (min-width: 900px) {
  .filter-toggle-checkbox {
    display: none;
  }
}

.filter-toggle-label {
  display: none;
}

@media (max-width: 899px) {
  /* Suskleistas filtrų mygtukas užima daug mažiau vietos nei anksčiau visas
     sąrašas, tad tas pats 2.5rem tinklelio tarpas po juo dabar atrodo kaip
     nepaaiškinamas tuščias plotas - mobiliajame jį sumažiname. */
  .catalog-layout {
    gap: 1.25rem;
  }

  .filter-toggle-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    margin-bottom: 1.25rem;
    background: var(--ink-raised);
    border: 1px solid var(--ink-border);
    border-radius: 8px;
    font-family: var(--font-display);
    font-weight: 700;
    cursor: pointer;
  }

  .filter-toggle-icon {
    color: var(--paper-faint);
    transition: transform 0.2s ease;
  }

  .filter-toggle-checkbox:checked ~ .filter-toggle-label .filter-toggle-icon {
    transform: rotate(180deg);
  }

  .filter-toggle-content {
    display: none;
  }

  .filter-toggle-checkbox:checked ~ .filter-toggle-content {
    display: block;
  }
}

.genre-sidebar h3 {
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper-faint);
  margin: 0 0 1rem;
}

.genre-sidebar nav + h3 {
  margin-top: 1.75rem;
}

.genre-list {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  max-height: 480px;
  overflow-y: auto;
  padding-right: 0.5rem;
}

.genre-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
  font-size: 0.85rem;
  color: var(--paper-dim);
  border-left: 2px solid transparent;
}

.genre-list a:hover {
  background: var(--ink-raised);
  color: var(--paper);
}

.genre-list a.active {
  color: var(--vermillion-bright);
  border-left-color: var(--vermillion);
  background: var(--ink-raised);
  font-weight: 700;
}

.genre-count {
  font-size: 0.72rem;
  color: var(--paper-faint);
  font-variant-numeric: tabular-nums;
}

.filter-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.filter-select {
  width: 100%;
  background: var(--ink-raised);
  border: 1px solid var(--ink-border);
  color: var(--paper-dim);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.5rem 2.2rem 0.5rem 0.9rem;
  border-radius: 6px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a89a86' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 12px 8px;
}

.filter-select:hover,
.filter-select:focus {
  border-color: var(--vermillion-dim);
  outline: none;
}

.filter-range-row {
  display: flex;
  gap: 0.6rem;
}

.filter-range-row input {
  width: 100%;
  min-width: 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--ink-border);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 0.85rem;
  padding: 0.4rem 0.25rem;
  transition: border-color 0.25s ease;
}

.filter-range-row input:focus {
  outline: none;
  border-bottom-color: var(--vermillion);
}

.filter-range-row input::placeholder {
  color: var(--paper-faint);
}

.filter-form-submit {
  align-self: flex-start;
  padding: 0.45rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--vermillion-dim);
  background: transparent;
  color: var(--vermillion-bright);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.filter-form-submit:hover {
  background: var(--vermillion);
  color: var(--ink);
}

/* Lipnus (sticky) šoninis meniu tik nuo 1300px, kur .catalog-layout yra tikra
   3 kolonų eilutė (žr. aukščiau) - prie 900-1299px .schedule-column tampa
   antra pilno pločio grid eilute, o tada šoninio meniu sticky "containing
   block" aukštis susilygina su visos tos eilutės aukščiu ir jis persidengia
   su grafiko sekcija apačioje. Statinis pozicionavimas tame tarpiniame ruože
   šio nepageidaujamo persidengimo išvengia. */
@media (min-width: 1300px) {
  .genre-sidebar {
    position: sticky;
    top: var(--header-offset);
  }
  .schedule-column {
    position: sticky;
    top: var(--header-offset);
  }
}

/* ---------- Artimiausių serijų dešinė kolona (savaitės grafikas) ---------- */

.schedule-column {
  min-width: 0;
}

.schedule-note {
  font-size: 0.72rem;
  color: var(--paper-faint);
  line-height: 1.5;
  margin: 0 0 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--ink-border);
}

.schedule-day {
  border-bottom: 1px solid var(--ink-border);
}

.schedule-day:last-child {
  border-bottom: none;
}

.schedule-day-header {
  display: flex;
  align-items: center;
  padding: 0.75rem 0.1rem;
  cursor: pointer;
  list-style: none;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--paper);
}

.schedule-day-header::-webkit-details-marker {
  display: none;
}

.schedule-day-name {
  margin-right: auto;
}

.schedule-day-date {
  color: var(--vermillion-bright);
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
  font-weight: 700;
  margin-right: 0.6rem;
}

.schedule-day-header::after {
  content: '›';
  color: var(--paper-faint);
  font-size: 1.1rem;
  line-height: 1;
  transition: transform 0.2s ease;
  transform: rotate(90deg);
}

.schedule-day[open] > .schedule-day-header::after {
  transform: rotate(-90deg);
}

.schedule-day-empty {
  padding: 0 0.1rem 1rem;
  font-size: 0.78rem;
  color: var(--paper-faint);
}

.schedule-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding-bottom: 1rem;
}

/* Šiame ruože .schedule-column užima visą plotį (žr. grid-column: 1/-1
   aukščiau) - vertikalus vienos kolonos sąrašas paliktų daug tuščios vietos,
   tad čia kiekvienos dienos sąrašas tampa daugiastulpiu tinkleliu. */
@media (min-width: 900px) and (max-width: 1299px) {
  .schedule-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }
}

.schedule-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.schedule-poster {
  flex-shrink: 0;
  width: 48px;
  aspect-ratio: 2/3;
  border-radius: 4px;
  overflow: hidden;
  background: var(--ink-raised);
  border: 1px solid var(--ink-border);
  transition: border-color 0.2s ease;
}

.schedule-item:hover .schedule-poster {
  border-color: var(--vermillion-dim);
}

.schedule-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.schedule-item-info {
  min-width: 0;
}

.schedule-title {
  font-size: 0.78rem;
  font-weight: 700;
  margin: 0 0 0.2rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.schedule-date {
  font-size: 0.7rem;
  color: var(--vermillion-bright);
  margin: 0;
  font-variant-numeric: tabular-nums;
}

/* ---------- Populiariausi šią savaitę juosta ---------- */

/* ---------- Card grid ---------- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1.5rem 1.25rem;
}

.card {
  display: flex;
  flex-direction: column;
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  background: var(--ink-raised);
  border: 1px solid var(--ink-border);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s ease;
}

.card:hover {
  transform: translateY(-6px);
  border-color: var(--vermillion-dim);
}

.card-poster {
  position: relative;
  aspect-ratio: 2 / 3;
  background: var(--ink-raised-2);
  overflow: hidden;
}

/* ---------- Poster fallback (kai poster_url nėra) ---------- */

.no-poster {
  background: repeating-linear-gradient(
    135deg,
    var(--ink-raised) 0px,
    var(--ink-raised) 14px,
    var(--ink-raised-2) 14px,
    var(--ink-raised-2) 28px
  );
  display: flex;
  align-items: center;
  justify-content: center;
}

.no-poster-mark {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--vermillion-dim);
  background: var(--ink);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 1px var(--ink-border);
}

.card-poster .no-poster-mark {
  width: 44%;
  aspect-ratio: 1;
  font-size: 1.6rem;
}

.detail-poster .no-poster-mark {
  width: 40%;
  aspect-ratio: 1;
  font-size: 2.2rem;
}

.schedule-poster .no-poster-mark {
  width: 60%;
  aspect-ratio: 1;
  font-size: 0.7rem;
}

.card-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.card:hover .card-poster img {
  transform: scale(1.06);
}

.card-poster::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(13, 11, 9, 0.95) 0%, rgba(13, 11, 9, 0.15) 55%, transparent 75%);
}

.card-badge {
  position: absolute;
  top: 0.55rem;
  right: -1.6rem;
  padding: 0.2rem 2rem;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  font-weight: 700;
  text-transform: uppercase;
  transform: rotate(38deg);
  z-index: 2;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

.card-badge.ongoing { background: var(--status-ongoing); color: #0d1410; }
.card-badge.released { background: rgba(24,20,15,0.85); color: var(--paper-dim); }
.card-badge.anons { background: var(--gold); color: #1a1305; }

.card-updated {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 2;
  font-size: 0.62rem;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  background: rgba(13, 11, 9, 0.65);
  backdrop-filter: blur(4px);
  color: var(--paper-dim);
  letter-spacing: 0.02em;
}

.card-rank {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: rgba(13, 11, 9, 0.75);
  backdrop-filter: blur(4px);
  color: var(--paper);
  font-size: 0.72rem;
  font-weight: 700;
}

.card-rank-top {
  background: var(--gold);
  color: var(--ink);
}

.card-info {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 0.75rem 0.8rem 0.7rem;
  z-index: 1;
}

.card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1.3;
  margin: 0 0 0.3rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  color: var(--paper-dim);
  font-variant-numeric: tabular-nums;
}

.card-meta .rating {
  color: var(--gold);
  font-weight: 700;
}

.card-meta .dot {
  opacity: 0.5;
}

.card-activity {
  margin: 0;
  padding: 0.4rem 0.8rem 0.6rem;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--vermillion-bright);
}

/* ---------- Pagination ---------- */

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 3rem;
  font-family: var(--font-body);
}

.pagination a, .pagination span {
  min-width: 2.1rem;
  height: 2.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-size: 0.85rem;
  color: var(--paper-dim);
  border: 1px solid transparent;
}

.pagination a:hover {
  border-color: var(--ink-border);
  color: var(--paper);
}

.pagination .current {
  background: var(--vermillion);
  color: var(--ink);
  font-weight: 700;
}

.pagination .disabled {
  opacity: 0.3;
  pointer-events: none;
}

.pagination {
  flex-wrap: wrap;
}

.pagination .pagination-gap {
  min-width: 1.2rem;
  color: var(--paper-faint);
}

@media (max-width: 480px) {
  .pagination { gap: 0.25rem; }
  .pagination a, .pagination span { min-width: 1.85rem; }
  .pagination .page-far { display: none; }
}

.empty-state {
  text-align: center;
  padding: 5rem 1rem;
  color: var(--paper-faint);
  font-family: var(--font-display);
  font-size: 1.2rem;
}

.empty-state p {
  margin: 0;
}

.empty-state-reset {
  display: inline-block;
  margin-top: 1.25rem;
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--vermillion-dim);
  border-radius: 999px;
  color: var(--vermillion-bright);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
}

.empty-state-reset:hover {
  background: var(--vermillion);
  border-color: var(--vermillion);
  color: #fff;
}

/* ---------- Detail page ---------- */

.detail-backdrop {
  position: relative;
  height: min(52vw, 420px);
  min-height: 260px;
  overflow: hidden;
}

.detail-backdrop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(18px) brightness(0.55) saturate(1.1);
  transform: scale(1.15);
}

.detail-backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(13,11,9,0.35) 0%, var(--ink) 96%);
}

.detail-shell {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3.5rem) 5rem;
  position: relative;
}

.detail-head {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 2.25rem;
  margin-top: -140px;
  position: relative;
  z-index: 2;
}

.detail-poster {
  width: 220px;
  aspect-ratio: 2/3;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 20px 45px rgba(0,0,0,0.55);
  border: 1px solid var(--ink-border);
  background: var(--ink-raised);
}

.detail-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail-info {
  padding-top: 148px;
}

.vertical-label {
  writing-mode: vertical-rl;
  position: absolute;
  right: clamp(1.25rem, 4vw, 3.5rem);
  top: 40px;
  font-family: var(--font-display);
  letter-spacing: 0.3em;
  font-size: 0.85rem;
  color: var(--paper-faint);
  z-index: 2;
}

.detail-title-orig {
  font-size: 0.9rem;
  color: var(--paper-dim);
  margin: 0 0 0.4rem;
  font-style: italic;
}

.detail-title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.08;
  margin: 0 0 1rem;
}

.detail-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1.4rem;
}

.pill {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.75rem;
  border-radius: 999px;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  border: 1px solid var(--ink-border);
  color: var(--paper-dim);
  text-transform: uppercase;
  font-weight: 500;
}

.pill.status-ongoing { color: var(--status-ongoing); border-color: var(--status-ongoing); }
.pill.status-released { color: var(--paper-dim); }
.pill.status-anons { color: var(--gold); border-color: var(--gold); }

.pill-activity {
  color: var(--ink);
  background: var(--vermillion);
  border-color: var(--vermillion);
  font-weight: 700;
}

.rating-block {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
}

.rating-block .num {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

.rating-block .label {
  font-size: 0.68rem;
  color: var(--paper-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.genre-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.6rem;
}

.genre-tag {
  font-size: 0.72rem;
  padding: 0.25rem 0.7rem;
  background: var(--ink-raised);
  border: 1px solid var(--vermillion-dim);
  color: var(--paper-dim);
  border-radius: 3px;
}

.detail-description {
  max-width: 68ch;
  line-height: 1.75;
  color: var(--paper-dim);
  font-size: 0.97rem;
}

.detail-description::first-letter {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 800;
  color: var(--vermillion);
  float: left;
  line-height: 1;
  padding-right: 0.5rem;
  padding-top: 0.15rem;
}

.related-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--ink-border);
}

.related-item {
  display: flex;
  gap: 0.6rem;
  width: 220px;
  padding: 0.5rem;
  border-radius: 6px;
  border: 1px solid transparent;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.related-item:hover {
  background: var(--ink-raised);
  border-color: var(--ink-border);
}

.related-poster {
  flex-shrink: 0;
  width: 52px;
  aspect-ratio: 2/3;
  border-radius: 4px;
  overflow: hidden;
  background: var(--ink-raised-2);
}

.related-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.related-poster .no-poster-mark {
  width: 60%;
  aspect-ratio: 1;
  font-size: 0.8rem;
}

.related-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.related-relation {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--vermillion-bright);
  font-weight: 700;
}

.related-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--paper);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.related-year {
  font-size: 0.72rem;
  color: var(--paper-faint);
}

.related-item.related-extra {
  display: none;
}

.related-row.expanded .related-item.related-extra {
  display: flex;
}

.related-toggle {
  margin-top: 0.75rem;
  background: none;
  border: 1px solid var(--ink-border);
  color: var(--paper-dim);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.related-toggle:hover {
  border-color: var(--vermillion);
  color: var(--paper);
}

.screenshot-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.6rem;
  margin-top: 1.5rem;
}

.screenshot-item {
  aspect-ratio: 16/9;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid var(--ink-border);
  background: var(--ink-raised-2);
}

.screenshot-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.screenshot-item:hover img {
  transform: scale(1.08);
}

/* ---------- Kadrų (screenshot) lightbox ---------- */

body.lightbox-locked {
  overflow: hidden;
}

.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 500;
  align-items: center;
  justify-content: center;
  background: rgba(13, 11, 9, 0.92);
  padding: 2rem;
}

.lightbox.open {
  display: flex;
}

.lightbox-image {
  max-width: min(90vw, 1100px);
  max-height: 85vh;
  border-radius: 6px;
  border: 1px solid var(--ink-border);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.lightbox-close,
.lightbox-nav {
  position: absolute;
  border-radius: 50%;
  border: 1px solid var(--ink-border);
  background: var(--ink-raised);
  color: var(--paper);
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.lightbox-close:hover,
.lightbox-nav:hover {
  background: var(--vermillion);
  border-color: var(--vermillion);
}

.lightbox-close {
  top: 1.25rem;
  right: 1.5rem;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.4rem;
}

.lightbox-nav {
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  font-size: 1.6rem;
}

.lightbox-prev {
  left: 1.5rem;
}

.lightbox-next {
  right: 1.5rem;
}

@media (max-width: 640px) {
  .lightbox-nav {
    width: 2.4rem;
    height: 2.4rem;
    font-size: 1.3rem;
  }
  .lightbox-prev {
    left: 0.5rem;
  }
  .lightbox-next {
    right: 0.5rem;
  }
  .lightbox-close {
    top: 0.75rem;
    right: 0.75rem;
  }
}

.section-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  margin: 3rem 0 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--ink-border);
}

/* ---------- Translations / episodes ---------- */

.translation-picker {
  margin-bottom: 1.25rem;
  position: relative;
}

.translation-select {
  width: 100%;
  max-width: 100%;
  text-overflow: ellipsis;
  background: var(--ink-raised);
  border: 1px solid var(--ink-border);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 700;
  padding: 0.85rem 2.5rem 0.85rem 1.1rem;
  border-radius: 6px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a89a86' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.1rem center;
  background-size: 12px 8px;
  transition: border-color 0.2s ease;
}

.translation-select:hover,
.translation-select:focus {
  border-color: var(--vermillion-dim);
  outline: none;
}

.translation-select option {
  background: var(--ink-raised);
  color: var(--paper);
}

.translation-single {
  font-weight: 700;
  font-size: 0.9rem;
  margin: 0 0 1.25rem;
  padding: 0.85rem 1.1rem;
  background: var(--ink-raised);
  border: 1px solid var(--ink-border);
  border-radius: 6px;
}

.episode-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
  gap: 0.5rem;
}

.episode-grid.hidden {
  display: none;
}

.episode-empty {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--paper-faint);
  font-size: 0.85rem;
}

/* Serija be tinkamos nuorodos - be hover efekto, kad neatrodytų paspaudžiama. */
.episode-btn:disabled {
  opacity: 0.35;
  pointer-events: none;
}

.episode-btn {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink-raised-2);
  border: 1px solid var(--ink-border);
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--paper-dim);
  font-variant-numeric: tabular-nums;
  transition: all 0.15s ease;
  cursor: pointer;
  overflow: hidden;
  padding: 0;
}

.episode-btn:hover {
  background: var(--vermillion);
  border-color: var(--vermillion);
  color: var(--ink);
}

.episode-btn.active {
  background: var(--vermillion);
  border-color: var(--vermillion);
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--vermillion), 0 4px 14px rgba(226, 67, 42, 0.4);
}

/* Kadrai (screenshots) - kai epizodas turi bent vieną, rodoma kaip 16:9
   miniatiūra su numeriu ant viršaus, o ne vien skaičius kvadrate. */
.episode-grid:has(.episode-btn.has-thumb) {
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
}

.episode-btn.has-thumb {
  aspect-ratio: 16 / 9;
}

.episode-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}

.episode-btn.has-thumb:hover .episode-thumb {
  transform: scale(1.08);
}

.episode-btn.has-thumb::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(13, 11, 9, 0.85) 0%, rgba(13, 11, 9, 0) 55%);
  z-index: 1;
}

.episode-btn.has-thumb .episode-num {
  position: relative;
  z-index: 2;
  align-self: flex-end;
  padding: 0.3rem 0.45rem;
  font-size: 0.75rem;
}

.episode-btn.has-thumb {
  align-items: stretch;
  justify-content: flex-start;
}

.episode-btn.has-thumb.active::before {
  background: linear-gradient(to top, rgba(226, 67, 42, 0.75) 0%, rgba(226, 67, 42, 0.05) 60%);
}

/* ---------- Watch player (single persistent player) ---------- */

.watch-section {
  margin: 2.5rem 0 0;
}

/* minmax(0, 1fr), ne 1fr: "1fr" minimumas = turinio min-content plotis, o
   ilgas "now-playing" tekstas (white-space: nowrap) jį išpūsdavo iki ~640px -
   telefone grotuvas ir serijų sąrašas išlįsdavo už ekrano krašto. */
.watch-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}

.watch-layout > * {
  min-width: 0;
}

/* ---------- Serijų atnaujinimų istorija (atskiras stulpelis šalia watch-layout) ---------- */
/* .detail-shell max-width yra 1200px - jei .history-column taptų PAPRASTU trečiu
   .watch-section stulpeliu TAME PAČIAME 1200px plotyje, jis būtinai atimtų
   vietos iš grotuvo/serijų (juos "suspaustų"), nes bendras plotis nepakistų.
   Vietoje to - nuo 1800px (kur už centruoto 1200px turinio realiai lieka
   >300px tuščios vietos iš abiejų pusių) .watch-section plotis dirbtinai
   padidinamas TIKSLIAI tiek, kiek reikia kolonai + tarpui (280+32=312px), o
   grid stulpeliai perskaičiuojami taip, kad .watch-layout atgautų LYGIAI TĄ
   PATĮ plotį, kokį turėtų be šios funkcijos - kolona "prisikuria" papildomame
   plote dešinėje, o ne dalinasi esamu. Žemiau 1800px - paprastas pilno pločio
   blokas po .watch-layout, jokio pločio dalybų/suspaudimo. */

.history-column {
  margin-top: 2.5rem;
  min-width: 0;
}

.history-column .section-title {
  margin-top: 0;
}

.history-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
}

.history-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.75rem;
  background: var(--ink-raised);
  border: 1px solid var(--ink-border);
  border-radius: 8px;
  font-size: 0.82rem;
}

.history-label {
  color: var(--paper);
  font-weight: 600;
}

.history-time {
  color: var(--paper-faint);
  font-size: 0.74rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Riba buvo 1800px, kai .detail-shell buvo 1200px pločio. Neon temoje
   .detail-shell išplėstas iki 1520px, tad 1800-2030px ekranuose (pvz. 1920px
   monitoriuje) papildoma kolona išlįsdavo už lango krašto ir būdavo nukirpta
   (body overflow-x: hidden). Kolonai reikia (vw - 1520)/2 >= 312px + atsarga. */
@media (min-width: 2100px) {
  .watch-section {
    /* +312px = 280px kolona + 2rem tarpas - .watch-layout stulpelis apačioje
       (minmax(0,1fr)) šitaip atgauna lygiai tokį patį plotį, koks būtų be
       šios papildomos kolonos. */
    width: calc(100% + 312px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 280px);
    gap: 2rem;
    align-items: start;
  }

  .history-column {
    margin-top: 0;
    position: sticky;
    top: var(--header-offset);
  }
}

/* ---------- Panašūs pagal žanrus (skiriasi nuo "Related anime" - žr. .related-row) ---------- */
/* .section-title jau turi margin-top: 3rem, tad papildomo tarpo pridėti nereikia. */

.watch-player {
  margin: 0;
}

.episode-panel .section-title {
  margin-top: 0;
}

.player-frame-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--ink-border);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.player-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.35s ease, visibility 0.35s ease;
  z-index: 2;
}

.player-placeholder img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(20px) brightness(0.4);
  transform: scale(1.15);
}

.player-placeholder-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  color: var(--paper-dim);
}

.player-placeholder-icon {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 1px solid var(--vermillion-dim);
  background: rgba(226, 67, 42, 0.12);
  color: var(--vermillion-bright);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  padding-left: 4px;
}

.player-placeholder-inner p {
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  margin: 0;
}

.player-placeholder.hidden {
  opacity: 0;
  visibility: hidden;
}

.player-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.player-iframe.active {
  opacity: 1;
}

.now-playing-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.7rem;
}

.now-playing {
  flex: 1;
  min-height: 1.4rem;
  min-width: 0;
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--paper-dim);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.source-badge {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vermillion-bright);
  background: var(--vermillion-dim);
  border: 1px solid var(--vermillion);
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
}

.source-badge.hidden {
  display: none;
}

.nav-btn {
  flex-shrink: 0;
  background: var(--ink-raised);
  border: 1px solid var(--ink-border);
  color: var(--paper-dim);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.nav-btn:hover:not(:disabled) {
  border-color: var(--vermillion);
  color: var(--paper);
}

.nav-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.episode-btn.watched:not(.active)::after {
  content: '';
  position: absolute;
  bottom: 3px;
  right: 3px;
  z-index: 2;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
}

.episode-btn-wide {
  grid-column: 1 / -1;
  aspect-ratio: auto;
  padding: 0.85rem;
}

@media (min-width: 900px) {
  .watch-layout {
    grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr);
  }

  .watch-player {
    position: sticky;
    top: var(--header-offset);
    z-index: 10;
  }

  .episode-panel {
    max-height: calc(100vh - var(--header-offset) - 20px);
    overflow-y: auto;
    position: sticky;
    top: var(--header-offset);
    padding-right: 0.5rem;
  }
}

/* ---------- Admin sync status ---------- */

.admin-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--ink-border);
  border-radius: 8px;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.admin-table th {
  text-align: left;
  padding: 0.75rem 1rem;
  background: var(--ink-raised);
  color: var(--paper-faint);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  white-space: nowrap;
  border-bottom: 1px solid var(--ink-border);
}

.admin-table td {
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--ink-border);
  white-space: nowrap;
}

.admin-table tbody tr:hover {
  background: var(--ink-raised);
}

.admin-table .mono {
  font-variant-numeric: tabular-nums;
  color: var(--paper-dim);
}

.run-type-pill {
  font-size: 0.7rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--ink-border);
  color: var(--paper-dim);
}

.log-status {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
}

.log-status.status-success { color: var(--status-ongoing); background: rgba(111, 174, 140, 0.12); }
.log-status.status-running { color: var(--gold); background: rgba(201, 163, 85, 0.12); }
.log-status.status-partial_failure { color: var(--gold); background: rgba(201, 163, 85, 0.12); }
.log-status.status-failed { color: var(--vermillion-bright); background: rgba(226, 67, 42, 0.12); }

.error-row td {
  white-space: normal;
  color: var(--vermillion-bright);
  font-size: 0.75rem;
  font-family: monospace;
  background: rgba(226, 67, 42, 0.05);
}

/* ---------- 404 ---------- */

.not-found {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1rem;
}

.not-found .stamp-big {
  width: 90px;
  height: 90px;
  border-radius: 46% 54% 52% 48% / 48% 44% 56% 52%;
  background: var(--vermillion);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 800;
  transform: rotate(-6deg);
}

.not-found h1 {
  font-family: var(--font-display);
  font-size: 1.6rem;
}

.not-found p {
  color: var(--paper-faint);
}

.not-found a {
  color: var(--vermillion);
  border-bottom: 1px solid var(--vermillion-dim);
}

/* ---------- Responsive ---------- */

/* Antraštės (.site-header) prisitaikymas - žr. "Header: planšetės ir telefonai"
   žemiau, po neon temos antraštės stilių. */
@media (max-width: 720px) {
  .detail-head {
    grid-template-columns: minmax(0, 1fr);
    margin-top: -90px;
  }
  .detail-poster {
    width: 140px;
  }
  .detail-info {
    padding-top: 0;
  }
  .vertical-label {
    display: none;
  }
  .nav-btn {
    padding: 0.8rem 1.1rem;
  }
}

/* ---------- Portal refresh: neon archive ---------- */

:root {
  --ink: #080a16;
  --ink-raised: #101426;
  --ink-raised-2: #171c34;
  --ink-border: #293154;
  --paper: #f7f7ff;
  --paper-dim: #bac0db;
  --paper-faint: #737b9d;
  --vermillion: #eb4d86;
  --vermillion-bright: #ff8bb4;
  --vermillion-dim: #572543;
  --gold: #aebdff;
  --status-ongoing: #6fe0bb;
  --status-released: #aeb6d4;
  --status-anons: #f3be70;
  --grain-opacity: 0.025;
}

body {
  background:
    radial-gradient(circle at 74% -10%, rgba(107, 76, 230, 0.24), transparent 31rem),
    radial-gradient(circle at 12% 28%, rgba(235, 77, 134, 0.11), transparent 27rem),
    var(--ink);
  overflow-x: hidden;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.26;
  background-image:
    linear-gradient(rgba(137, 151, 230, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(137, 151, 230, 0.05) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, #000, transparent 72%);
}

.site-header {
  gap: clamp(1rem, 2.4vw, 2.4rem);
  padding-block: 0.85rem;
  background: rgba(8, 10, 22, 0.76);
  border-bottom-color: rgba(126, 139, 213, 0.2);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(22px) saturate(1.2);
}

.brand { gap: 0.62rem; }

.brand-stamp {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, #ff7fab, var(--vermillion) 55%, #9c4cff);
  color: #fff;
  transform: rotate(-7deg);
  box-shadow: 0 10px 24px rgba(235, 77, 134, 0.26);
}

.brand-name { font-size: 1.3rem; letter-spacing: 0.18em; }
.brand-sub { color: #838cab; letter-spacing: 0.21em; }
.search-form { max-width: 500px; }

.search-form::before {
  content: '⌕';
  position: absolute;
  left: 0.75rem;
  top: 50%;
  z-index: 1;
  color: var(--paper-faint);
  font-size: 1.25rem;
  line-height: 1;
  transform: translateY(-52%) rotate(-18deg);
  pointer-events: none;
}

.search-form input {
  min-height: 42px;
  padding: 0.5rem 0.8rem 0.5rem 2.35rem;
  border: 1px solid rgba(127, 142, 211, 0.26);
  border-radius: 999px;
  background: rgba(21, 26, 49, 0.65);
}

.search-form input:hover { border-color: rgba(174, 189, 255, 0.48); }

.search-form input:focus {
  border-color: var(--vermillion);
  box-shadow: 0 0 0 4px rgba(235, 77, 134, 0.12);
}

.search-suggestions {
  border-color: rgba(149, 161, 230, 0.3);
  border-radius: 14px;
  background: rgba(16, 20, 38, 0.97);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45);
}

.status-tabs { gap: 0.25rem; }

.status-tabs a,
.random-btn {
  border-color: transparent;
  background: transparent;
  color: var(--paper-dim);
  letter-spacing: 0.07em;
}

.status-tabs a:hover,
.random-btn:hover {
  background: rgba(174, 189, 255, 0.09);
  border-color: transparent;
  color: var(--paper);
}

.status-tabs a.active {
  color: #fff;
  background: rgba(235, 77, 134, 0.2);
  border-color: rgba(255, 139, 180, 0.32);
  box-shadow: inset 0 0 0 1px rgba(255, 139, 180, 0.07);
}

.random-btn {
  border: 1px solid rgba(174, 189, 255, 0.2);
  background: rgba(174, 189, 255, 0.06);
}

/* ---------- Header: planšetės ir telefonai ---------- */

/* Iki 1023px vienoje eilutėje nebetelpa logotipas, paieška, būsenų skirtukai
   ir "Случайное" - paieškos laukas buvo suspaudžiamas iki ~60px ir tapdavo
   nenaudojamas. Skirtukai perkeliami į antrą eilutę, paieška užima likusį
   pirmos eilutės plotį. Antraštė aukštesnė, tad ir sticky atitraukimas. */
@media (max-width: 1023px) {
  :root { --header-offset: 128px; }

  .site-header {
    flex-wrap: wrap;
    row-gap: 0.65rem;
  }

  .search-form {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
  }

  .random-btn { order: 1; }

  .site-header .status-tabs {
    order: 2;
    flex: 1 1 100%;
    flex-wrap: nowrap;
    margin-left: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .site-header .status-tabs::-webkit-scrollbar { display: none; }
}

/* Telefone trijų eilučių lipni antraštė užimdavo ~25% ekrano aukščio ir
   visą laiką dengdavo turinį - čia ji slenka kartu su puslapiu, o
   "Случайное" perkeltas į pirmą eilutę šalia logotipo. */
@media (max-width: 720px) {
  .site-header {
    position: relative;
    gap: 0.7rem;
  }

  .random-btn {
    order: 1;
    margin-left: auto;
  }

  .search-form {
    order: 2;
    flex: 1 1 100%;
  }

  .site-header .status-tabs { order: 3; }
}

.page {
  max-width: 1520px;
  padding-top: clamp(1.5rem, 3vw, 3.25rem);
}

/* Hero */
.portal-hero {
  isolation: isolate;
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: center;
  overflow: hidden;
  margin-bottom: 3rem;
  padding: clamp(2rem, 5vw, 4.5rem);
  border: 1px solid rgba(160, 174, 248, 0.22);
  border-radius: 24px;
  background:
    radial-gradient(circle at 76% 42%, rgba(116, 84, 236, 0.26), transparent 29%),
    radial-gradient(circle at 12% 112%, rgba(235, 77, 134, 0.16), transparent 30%),
    repeating-linear-gradient(90deg, rgba(159, 173, 255, 0.04) 0 1px, transparent 1px 48px),
    linear-gradient(125deg, #10142a, #090c1b 68%);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.24), inset 0 1px rgba(255, 255, 255, 0.04);
}

.portal-hero::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 24rem;
  height: 24rem;
  right: 17%;
  top: 50%;
  border-radius: 50%;
  background: rgba(119, 83, 255, 0.34);
  filter: blur(80px);
  transform: translateY(-50%);
}

.portal-hero::after {
  content: '';
  position: absolute;
  inset: 12px;
  z-index: 1;
  border: 1px solid rgba(195, 203, 255, 0.1);
  border-radius: 17px;
  pointer-events: none;
}

.portal-hero-background {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
}

.portal-hero-shade {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, rgba(8, 10, 22, 0.2), transparent 64%);
}

.hero-content { max-width: min(57%, 650px); }

.hero-kicker,
.hero-index {
  margin: 0;
  color: #9da7dd;
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.hero-kicker { display: flex; align-items: center; gap: 0.65rem; }

.hero-kicker span {
  width: 1.8rem;
  height: 1px;
  background: var(--vermillion-bright);
  box-shadow: 0 0 10px var(--vermillion);
}

.hero-index {
  position: absolute;
  right: 1.2rem;
  top: 1.15rem;
  color: rgba(202, 210, 255, 0.54);
}

.hero-content .hero-title {
  max-width: 12ch;
  margin: 0.75rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(2.35rem, 5vw, 4.65rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-wrap: balance;
  text-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}

.hero-original-title {
  max-width: 52ch;
  margin: 0.85rem 0 0;
  color: var(--paper-dim);
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1.5rem;
}

.hero-meta span {
  padding: 0.34rem 0.66rem;
  border: 1px solid rgba(174, 189, 255, 0.23);
  border-radius: 999px;
  background: rgba(12, 16, 34, 0.42);
  color: #d5daf8;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
}

.hero-meta .hero-rating { color: #ffe19a; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.hero-primary,
.hero-secondary {
  display: inline-flex;
  align-items: center;
  min-height: 45px;
  padding: 0.7rem 1.05rem;
  border-radius: 9px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.hero-primary {
  gap: 1.8rem;
  background: linear-gradient(135deg, #f05b94, #d93e7c);
  color: #fff;
  box-shadow: 0 10px 24px rgba(217, 62, 124, 0.28);
}

.hero-primary span { font-size: 1.1rem; line-height: 0; }

.hero-secondary {
  border: 1px solid rgba(174, 189, 255, 0.28);
  color: var(--paper-dim);
  background: rgba(16, 20, 38, 0.34);
}

.hero-primary:hover,
.hero-secondary:hover { transform: translateY(-2px); color: #fff; }
.hero-primary:hover { box-shadow: 0 15px 28px rgba(217, 62, 124, 0.42); }
.hero-secondary:hover { background: rgba(174, 189, 255, 0.13); }

.hero-decoration {
  position: absolute;
  right: 1.2rem;
  bottom: 1.1rem;
  display: flex;
  gap: 0.8rem;
  color: rgba(202, 210, 255, 0.5);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.hero-decoration span + span::before {
  content: '•';
  margin-right: 0.8rem;
  color: var(--vermillion-bright);
}

/* Catalog surfaces */
.catalog-layout { gap: 2rem; }

.genre-sidebar,
.schedule-column {
  padding: 1.2rem;
  border: 1px solid rgba(152, 165, 235, 0.17);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(19, 24, 46, 0.72), rgba(13, 17, 34, 0.55));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.025);
}

@media (min-width: 900px) {
  .catalog-layout { grid-template-columns: 230px 1fr; }
}

@media (min-width: 1300px) {
  .catalog-layout { grid-template-columns: 230px 1fr 290px; }
}

.genre-sidebar h3,
.section-title { color: #9ba5d6; letter-spacing: 0.13em; }

.genre-list a { border-left: 0; border-radius: 7px; }
.genre-list a:hover { background: rgba(174, 189, 255, 0.08); }
.genre-list a.active {
  border-left-color: transparent;
  background: rgba(235, 77, 134, 0.13);
  color: #ff9dc1;
}

.filter-select,
.sort-select {
  background-color: rgba(17, 22, 42, 0.92);
  border-color: rgba(139, 153, 225, 0.25);
  border-radius: 8px;
}

.filter-form-submit {
  border-color: rgba(255, 139, 180, 0.37);
  background: rgba(235, 77, 134, 0.09);
  color: #ff9fc3;
}

.filter-form-submit:hover { background: var(--vermillion); color: #fff; }

.page-heading {
  margin-bottom: 1.5rem;
  border-bottom-color: rgba(150, 164, 235, 0.18);
}

.page-heading h1 { letter-spacing: -0.025em; }

.grid {
  grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
  gap: 1.8rem 1.1rem;
}

/* Poster cards */
.card {
  overflow: visible;
  border: 0;
  border-radius: 13px;
  background: transparent;
  box-shadow: none;
}

.card::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0.65rem -0.1rem -0.15rem;
  border-radius: 14px;
  background: rgba(111, 95, 241, 0.26);
  filter: blur(14px);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.card:hover { border-color: transparent; transform: translateY(-7px); }
.card:hover::before { opacity: 1; }

.card-poster {
  border: 1px solid rgba(160, 173, 241, 0.18);
  border-radius: 13px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
}

.card:hover .card-poster { border-color: rgba(255, 139, 180, 0.55); }

.card-poster::after {
  background: linear-gradient(to top, rgba(7, 9, 21, 0.98) 0%, rgba(7, 9, 21, 0.23) 58%, transparent 79%);
}

.card-badge {
  top: 0.55rem;
  right: auto;
  left: 0.55rem;
  padding: 0.25rem 0.52rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 6px;
  box-shadow: none;
  transform: none;
  backdrop-filter: blur(5px);
}

/* TOP puslapyje (.card-rank) būsenos ženkliukas, perkeltas į kairį kampą,
   uždengdavo vietos numerį - kai numeris yra, ženkliukas pastumiamas dešiniau. */
.card-rank ~ .card-badge { left: 2.45rem; }

.card-badge.ongoing { color: #06271e; }
.card-badge.released { background: rgba(14, 18, 36, 0.75); color: #d2d9f7; }
.card-updated { left: auto; right: 0.5rem; background: rgba(8, 10, 22, 0.78); }
.card-rank { background: rgba(8, 10, 22, 0.82); }
.card-rank-top { background: #f0bc69; color: #171021; }
.card-info { padding: 0.85rem 0.85rem 0.75rem; }
.card-title { font-size: 0.96rem; line-height: 1.25; }
.card-meta { color: #c4cbe7; }
.card-meta .rating { color: #ffe19a; }

.card-activity {
  min-height: 2.45em;
  padding: 0.55rem 0.2rem 0 0.25rem;
  color: #ff9fc3;
}

.schedule-note,
.schedule-day { border-bottom-color: rgba(150, 164, 235, 0.17); }
.schedule-day-date,
.schedule-date { color: #ff9fc3; }
.schedule-poster { border-radius: 8px; border-color: rgba(160, 173, 241, 0.2); }

.filter-chip {
  border-color: rgba(155, 169, 240, 0.23);
  background: rgba(174, 189, 255, 0.07);
}

.pagination .current { background: linear-gradient(135deg, #ee5b96, #cc3c82); color: #fff; }

@media (max-width: 899px) {
  .genre-sidebar { padding: 0; border: 0; background: none; box-shadow: none; }
  .filter-toggle-label {
    margin-bottom: 0;
    border-color: rgba(150, 164, 235, 0.22);
    border-radius: 12px;
    background: rgba(19, 24, 46, 0.82);
  }
  .filter-toggle-content {
    margin-top: 0.75rem;
    padding: 1rem;
    border: 1px solid rgba(152, 165, 235, 0.17);
    border-radius: 12px;
    background: rgba(16, 20, 38, 0.7);
  }
}

@media (max-width: 720px) {
  .site-header { gap: 0.7rem; }
  .brand-stamp { width: 38px; height: 38px; }
  .brand-name { font-size: 1.15rem; }
  .status-tabs a { padding: 0.35rem 0.62rem; font-size: 0.7rem; }
  .portal-hero {
    min-height: 500px;
    align-items: flex-start;
    padding: 2.2rem 1.35rem;
    border-radius: 18px;
  }
  .portal-hero-background {
    object-position: 63% center;
  }
  .portal-hero-shade {
    background: linear-gradient(180deg, rgba(8, 10, 22, 0.97) 0%, rgba(8, 10, 22, 0.77) 34%, rgba(8, 10, 22, 0.12) 100%);
  }
  .hero-content { max-width: 100%; }
  .hero-content .hero-title { max-width: 10ch; font-size: clamp(2.1rem, 12vw, 3.15rem); }
  .hero-original-title { max-width: 30ch; }
  .hero-decoration { left: 1.2rem; right: auto; bottom: 1rem; gap: 0.45rem; }
  .hero-decoration span:nth-child(2) { display: none; }
  .hero-decoration span + span::before { margin-right: 0.45rem; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 0.75rem; }
  .card-title { font-size: 0.83rem; }
  .card-info { padding: 0.6rem; }
  .card-meta { font-size: 0.64rem; gap: 0.32rem; }
  .card-badge { font-size: 0.52rem; padding: 0.19rem 0.38rem; }
  .card-updated { display: none; }
  .schedule-column { padding: 1rem; border-radius: 12px; }
}

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

/* Populiariausi savaitės anime tampa hero dalimi, o ne atskiru katalogo
   bloku po juo. */
.portal-hero {
  min-height: 660px;
  align-items: flex-start;
}

.hero-content {
  position: relative;
  z-index: 2;
}

.hero-decoration {
  top: 1.15rem;
  right: 4.3rem;
  bottom: auto;
}

.hero-weekly {
  position: absolute;
  z-index: 2;
  right: clamp(2rem, 5vw, 4.5rem);
  bottom: clamp(1.5rem, 3vw, 3rem);
  left: clamp(2rem, 5vw, 4.5rem);
}

.hero-weekly-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.hero-weekly-heading h2 {
  margin: 0;
  color: #c4cbe7;
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hero-weekly-heading a {
  color: #ff9fc3;
  font-size: 0.63rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

.hero-weekly-list {
  display: flex;
  gap: 0.8rem;
  overflow: hidden;
}

.hero-weekly-item {
  flex: 0 0 122px;
  width: 122px;
}

.hero-weekly .card {
  transform: none;
}

.hero-weekly .card::before,
.hero-weekly .card-activity {
  display: none;
}

.hero-weekly .card-poster { border-radius: 10px; }
.hero-weekly .card-info { padding: 0.55rem; }
.hero-weekly .card-title { font-size: 0.73rem; }
.hero-weekly .card-meta { font-size: 0.59rem; }

@media (max-width: 720px) {
  .portal-hero { min-height: 620px; }
  .hero-weekly {
    right: 1.35rem;
    bottom: 1.2rem;
    left: 1.35rem;
  }
  .hero-weekly-list { overflow-x: auto; padding-bottom: 0.25rem; }
  .hero-weekly-item { flex-basis: 108px; width: 108px; }
  .hero-decoration { display: none; }
}

.portal-hero { min-height: clamp(430px, 31vw, 470px); }

@media (max-width: 720px) {
  .portal-hero { min-height: 470px; }
}

/* Compact hero: the image's two characters point directly at the real weekly
   anime cards.  These rules deliberately override the older temporary
   fallback positioning used while the PHP view was still syncing to live. */
.portal-hero {
  min-height: clamp(430px, 31vw, 470px);
  align-items: flex-start;
  margin-bottom: 2rem;
  padding: clamp(1.5rem, 3vw, 3rem);
  background: #080a16;
}

.portal-hero::before { display: none; }

.portal-hero-background {
  z-index: -3;
  opacity: 1;
  object-position: center;
}

.portal-hero-shade {
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(5, 7, 18, 0.82) 0%, rgba(5, 7, 18, 0.52) 31%, rgba(5, 7, 18, 0.13) 61%, rgba(5, 7, 18, 0.42) 100%),
    linear-gradient(0deg, rgba(5, 7, 18, 0.62) 0%, transparent 48%);
}

.hero-content {
  z-index: 2;
  max-width: 25rem;
  margin-left: clamp(7rem, 18vw, 18rem);
}

.hero-content .hero-title {
  max-width: 11ch;
  margin-top: 0.55rem;
  font-size: clamp(2.15rem, 4vw, 4rem);
}

.hero-content .hero-title span { display: block; }
.hero-index,
.hero-original-title,
.hero-meta,
.hero-actions,
.hero-decoration { display: none; }

.hero-weekly {
  position: absolute;
  z-index: 2;
  right: auto;
  bottom: 1.1rem;
  left: 50%;
  width: min(680px, calc(100% - 3rem));
  transform: translateX(-50%);
}

.hero-weekly-heading { margin-bottom: 0.45rem; }
.hero-weekly-heading h2 {
  color: #f0d3e6;
  font-size: 0.72rem;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.65);
}

.hero-weekly-list {
  gap: 0.65rem;
  padding: 0.15rem;
  overflow-x: auto;
  scrollbar-width: thin;
}

.hero-weekly-item { flex-basis: 112px; width: 112px; }
.hero-weekly .card-poster { border-color: rgba(228, 184, 255, 0.34); }
.hero-weekly .card-info { padding: 0.42rem 0.45rem; }
.hero-weekly .card-title { font-size: 0.67rem; }
.hero-weekly .card-meta { font-size: 0.55rem; }

@media (max-width: 720px) {
  .portal-hero {
    min-height: 470px;
    padding: 1.35rem;
  }
  .portal-hero-background { object-position: 16% center; }
  .hero-content {
    max-width: 12rem;
    margin-left: 0;
  }
  .hero-content .hero-title { font-size: clamp(1.8rem, 10vw, 2.7rem); }
  .hero-weekly { width: calc(100% - 2rem); bottom: 0.85rem; }
  .hero-weekly-item { flex-basis: 96px; width: 96px; }
}

/* ---------- Public comments ---------- */

.comments-section {
  margin-top: 2.5rem;
}

.comments-section .section-title {
  margin-top: 0;
}

.comment-form {
  padding: clamp(1rem, 2vw, 1.4rem);
  border: 1px solid rgba(151, 166, 241, 0.2);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(18, 23, 46, 0.78), rgba(10, 13, 30, 0.66));
}

.comment-form-row {
  display: grid;
  gap: 0.45rem;
  margin-bottom: 1rem;
}

.comment-form label {
  color: #d5daf8;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.comment-form input,
.comment-form textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(155, 169, 240, 0.28);
  border-radius: 9px;
  background: rgba(7, 10, 25, 0.72);
  color: #f5f5ff;
  font: inherit;
  padding: 0.78rem 0.9rem;
}

.comment-form textarea {
  min-height: 7rem;
  resize: vertical;
}

.comment-form input:focus,
.comment-form textarea:focus {
  border-color: #ff8bb4;
  box-shadow: 0 0 0 3px rgba(255, 139, 180, 0.13);
  outline: 0;
}

.comment-form-footer,
.comment-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.comment-hint,
.comment-empty,
.comment-meta time {
  margin: 0;
  color: #aeb6d5;
  font-size: 0.78rem;
}

.comment-submit {
  flex: 0 0 auto;
  border: 1px solid #ee5b96;
  border-radius: 9px;
  background: linear-gradient(135deg, #ee5b96, #cc3c82);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  padding: 0.72rem 1rem;
}

.comment-submit:hover {
  filter: brightness(1.08);
}

.comment-honeypot {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  white-space: nowrap !important;
}

.comment-notice {
  margin: 0 0 1rem;
  padding: 0.8rem 0.95rem;
  border: 1px solid;
  border-radius: 10px;
  font-size: 0.88rem;
}

.comment-notice.success {
  border-color: rgba(111, 224, 187, 0.55);
  background: rgba(67, 167, 126, 0.15);
  color: #b6f0d7;
}

.comment-notice.error {
  border-color: rgba(255, 139, 180, 0.55);
  background: rgba(204, 60, 130, 0.16);
  color: #ffd0df;
}

.comment-list {
  display: grid;
  gap: 0.8rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.comment-item {
  padding: 1rem 1.1rem;
  border: 1px solid rgba(151, 166, 241, 0.17);
  border-radius: 13px;
  background: rgba(11, 15, 33, 0.62);
}

.comment-meta strong {
  color: #f5f5ff;
  font-size: 0.9rem;
}

.comment-body {
  margin: 0.65rem 0 0;
  color: #cbd1ea;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

@media (max-width: 560px) {
  .comment-form-footer,
  .comment-meta {
    align-items: flex-start;
    flex-direction: column;
  }

  .comment-submit {
    width: 100%;
  }
}

/* Centered INKAN mark above the weekly carousel. */
.hero-content {
  position: absolute;
  z-index: 2;
  top: 42%;
  left: 50%;
  width: auto;
  max-width: none;
  margin: 0;
  transform: translate(-50%, -50%);
  text-align: center;
}

.hero-content .hero-title {
  max-width: none;
  margin: 0;
  color: #f8f2ff;
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 6vw, 6.25rem);
  font-weight: 800;
  letter-spacing: 0.18em;
  line-height: 0.9;
  text-indent: 0.18em;
  text-shadow: 0 5px 28px rgba(0, 0, 0, 0.72), 0 0 28px rgba(191, 121, 255, 0.18);
}

@media (max-width: 720px) {
  .hero-content { top: 36%; }
  .hero-content .hero-title {
    font-size: clamp(2.7rem, 14vw, 4.5rem);
  }
}

/* Savaitės juosta yra hero viduje, ne atskira "plaukiojanti" kortelė po juo. */
.portal-hero { min-height: clamp(430px, 31vw, 470px); }

@media (max-width: 720px) {
  .portal-hero { min-height: 470px; }
}

/* Anime detail page — neon archive variant matching the portal home. */
body:has(.detail-shell) {
  background:
    linear-gradient(to bottom, rgba(8, 10, 22, 0.34), rgba(8, 10, 22, 0.76) 72%, var(--ink)),
    url('../img/page-side-characters.webp') center top / cover fixed no-repeat,
    var(--ink);
}

.detail-backdrop {
  display: none;
}

.detail-backdrop img {
  filter: blur(18px) brightness(0.38) saturate(1.35) hue-rotate(12deg);
  transform: scale(1.12);
}

.detail-backdrop::after {
  background:
    linear-gradient(90deg, rgba(7, 9, 20, 0.76), rgba(7, 9, 20, 0.18) 60%, rgba(7, 9, 20, 0.58)),
    linear-gradient(to bottom, rgba(7, 9, 20, 0.1) 0%, var(--ink) 94%);
}

.detail-shell {
  max-width: 1520px;
  padding-top: clamp(2rem, 4vw, 4rem);
  padding-inline: clamp(1.25rem, 4vw, 3.5rem);
}

.detail-head {
  grid-template-columns: 230px minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.8rem);
  margin-top: 0;
  padding: clamp(1.1rem, 2vw, 1.7rem);
  border: 1px solid rgba(151, 166, 241, 0.2);
  border-radius: 22px;
  background: linear-gradient(125deg, rgba(15, 19, 42, 0.89), rgba(8, 10, 24, 0.72));
  box-shadow: 0 26px 68px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(16px);
}

.detail-poster {
  width: 230px;
  border-color: rgba(185, 196, 255, 0.3);
  border-radius: 14px;
  box-shadow: 0 20px 42px rgba(0, 0, 0, 0.48), 0 0 0 5px rgba(130, 105, 241, 0.06);
}

.detail-info { padding-top: 0.35rem; }

.vertical-label { display: none; }

.detail-title-orig { color: #bac0db; }
.detail-title {
  max-width: 20ch;
  color: #f9f8ff;
  font-size: clamp(2rem, 4vw, 3.7rem);
  text-shadow: 0 6px 24px rgba(0, 0, 0, 0.32);
}

.detail-meta-row { gap: 0.55rem; margin-bottom: 1.1rem; }
.pill,
.genre-tag {
  border-color: rgba(155, 169, 240, 0.24);
  background: rgba(174, 189, 255, 0.07);
  color: #d5daf8;
  border-radius: 999px;
}

.pill.status-ongoing { border-color: rgba(111, 224, 187, 0.5); }
.pill.status-released { border-color: rgba(174, 182, 212, 0.34); }
.pill.status-anons { border-color: rgba(243, 190, 112, 0.5); }
.pill-activity { background: rgba(235, 77, 134, 0.18); border-color: rgba(255, 139, 180, 0.42); color: #ffb4ce; }

.rating-block .num { color: #ffe19a; }
.genre-row { margin-bottom: 1.2rem; }
.genre-tag { border-radius: 7px; }
.detail-description { color: #c4cbe7; line-height: 1.78; }
.detail-description::first-letter { color: #ff8bb4; }

.related-row {
  border-top-color: rgba(150, 164, 235, 0.18);
}
.related-item { border-radius: 11px; }
.related-item:hover { background: rgba(174, 189, 255, 0.08); border-color: rgba(155, 169, 240, 0.23); }

.watch-section { margin-top: 2rem; }
.watch-layout { gap: 1.4rem; }
.watch-player,
.episode-panel,
.history-column {
  border: 1px solid rgba(151, 166, 241, 0.17);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(18, 23, 46, 0.76), rgba(10, 13, 30, 0.62));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.025);
}

.watch-player { padding: 0.85rem; }
.episode-panel { padding: 1.1rem; }
.history-column { padding: 1.1rem; }
.player-frame-wrap { border-color: rgba(173, 186, 255, 0.25); border-radius: 12px; }
.player-placeholder-icon { border-color: rgba(255, 139, 180, 0.46); background: rgba(235, 77, 134, 0.16); color: #ffb4ce; }

.translation-select,
.translation-single {
  border-color: rgba(155, 169, 240, 0.25);
  background-color: rgba(12, 16, 34, 0.86);
  border-radius: 9px;
}

.episode-btn {
  border-color: rgba(155, 169, 240, 0.2);
  border-radius: 8px;
  background: rgba(174, 189, 255, 0.07);
}
.episode-btn:hover,
.episode-btn.active {
  border-color: rgba(255, 139, 180, 0.66);
  background: linear-gradient(135deg, #ee5b96, #cc3c82);
  color: #fff;
  box-shadow: 0 6px 16px rgba(204, 60, 130, 0.25);
}
.episode-btn.has-thumb::before { background: linear-gradient(to top, rgba(7, 9, 21, 0.9), transparent 62%); }
.episode-btn.has-thumb.active::before { background: linear-gradient(to top, rgba(204, 60, 130, 0.78), transparent 62%); }

.nav-btn { border-color: rgba(155, 169, 240, 0.25); background: rgba(174, 189, 255, 0.07); }
.nav-btn:hover:not(:disabled) { border-color: rgba(255, 139, 180, 0.58); color: #fff; }
.now-playing { color: #c4cbe7; }
.source-badge { color: #ffb4ce; background: rgba(235, 77, 134, 0.13); border-color: rgba(255, 139, 180, 0.38); }

.history-item { border-color: rgba(155, 169, 240, 0.16); background: rgba(174, 189, 255, 0.05); }

@media (max-width: 720px) {
  body:has(.detail-shell) {
    background:
      linear-gradient(to bottom, rgba(8, 10, 22, 0.46), var(--ink) 72%),
      url('../img/page-side-characters.webp') center top / auto 620px no-repeat,
      var(--ink);
  }
  .detail-head { grid-template-columns: minmax(0, 1fr); margin-top: 0; padding: 1rem; border-radius: 17px; }
  .detail-poster { width: 150px; }
  .detail-info { padding-top: 0; }
  .detail-title { font-size: clamp(1.9rem, 9vw, 2.8rem); }
  .watch-player,
  .episode-panel,
  .history-column { border-radius: 13px; }
}

/* One illustration only: the older page-edge characters created a visibly
   cut collage around the pointing hero.  Keep the surrounding page quiet so
   the hands and the five weekly cards read as one scene. */
body:has(.catalog-layout) {
  background:
    radial-gradient(circle at 50% 16%, rgba(91, 61, 180, 0.22), transparent 38%),
    linear-gradient(to bottom, #090b19 0%, #070914 72%, var(--ink) 100%);
}

/* ---------- Site footer ---------- */

.site-footer {
  overflow: hidden;
  margin-top: 0;
  border: 0;
  background: #070914;
  line-height: 0;
}

.site-footer-picture,
.site-footer-image {
  width: 100%;
  display: block;
}

.site-footer-image {
  height: auto;
  max-width: none;
}

/* Centravimas per auto paraštes, ne justify-content: center - pastarasis,
   kortelėms netilpus (telefone), pirmąsias nustumdavo už kairio krašto, kur
   jų nebuvo įmanoma pasiekti slenkant. Auto paraštės persipildžius tampa 0. */
.hero-weekly-list { justify-content: flex-start; }
.hero-weekly-item:first-child { margin-left: auto; }
.hero-weekly-item:last-child { margin-right: auto; }
.hero-weekly-item { flex-basis: 108px; width: 108px; }