/* Dark is the only palette (YouTube Music's native theme). */
:root {
  --bg: #0f0f0f;
  --surface: #212121;
  --surface-alt: #272727;
  --text: #f1f1f1;
  --muted: #aaaaaa;
  --border: #303030;
  --brand: #ff0000;
  --brand-contrast: #ffffff;
  --chip-bg: #272727;
  --chip-text: #f1f1f1;
  --chip-active-bg: #f1f1f1;
  --chip-active-text: #0f0f0f;
  --hover-surface: #1c1c1c;
  --radius: 8px;
  --radius-lg: 12px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Roboto", "Segoe UI", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}

.wrap {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

a { color: var(--text); text-decoration: none; }
a:hover { text-decoration: underline; }

.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  color: var(--text);
  padding: 0.35rem 0;
}
.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.75rem;
}
.header-text {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}
.brand-logo {
  width: 24px;
  height: 24px;
  display: block;
  flex-shrink: 0;
}
.brand-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.site-header .brand {
  color: var(--text);
  font-family: "Nunito", "Roboto", "Segoe UI", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 800;
  text-decoration: none;
}
.site-header .tagline {
  margin: 0.05rem 0 0;
  color: var(--muted);
  font-family: "Roboto", "Segoe UI", Arial, sans-serif;
  font-size: 0.7rem;
}
.header-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}
.lang-select {
  padding: 0.3rem 1.6rem 0.3rem 0.7rem;
  border: none;
  border-radius: 999px;
  background: var(--chip-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23aaaaaa' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 0.6rem center/0.6rem;
  color: var(--chip-text);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

main.wrap { padding-top: 2rem; padding-bottom: 3rem; min-height: 60vh; }

h2 { font-size: 1.3rem; margin-top: 0; font-weight: 500; }

.results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.results-header h2 {
  margin: 0;
  flex-shrink: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.results-header .sort-select { flex-shrink: 0; }

.search-form { margin-bottom: 1.5rem; display: flex; gap: 0.6rem; flex-wrap: wrap; }
.search-form input[type="search"] {
  flex: 1;
  min-width: 200px;
  padding: 0.65rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 1rem;
  background: var(--surface-alt);
  color: var(--text);
}
.search-form input[type="search"]:focus {
  outline: none;
  border-color: var(--muted);
}
.sort-select {
  flex-shrink: 0;
  padding: 0.55rem 2rem 0.55rem 1rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-alt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23aaaaaa' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 0.9rem center/0.6rem;
  color: var(--text);
  font-size: 0.85rem;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.sort-select:focus {
  outline: none;
  border-color: var(--muted);
}
.advanced-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-bottom: 1rem;
  padding: 0;
  border: none;
  background: none;
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
}
.advanced-toggle:hover { text-decoration: underline; }
.advanced-toggle-icon {
  display: inline-block;
  transition: transform 0.15s;
}
.advanced-toggle.is-open .advanced-toggle-icon { transform: rotate(180deg); }

.filter-bar {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}
.filter-bar-advanced { margin-top: -0.5rem; }
.filter-bar[hidden] { display: none; }
.filter-group {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.4rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-bottom: 3px;
}
/* Subtle fade so a row that's clipped mid-chip (common on narrow screens)
   reads as "more to scroll" rather than looking like the row just ends
   there. mask-image is anchored to the element's own box, not the scrolled
   content, so the fade stays fixed at the edges as you scroll instead of
   moving with the chips. JS (index.html) toggles these two classes based
   on actual scroll position - no fade whichever edge has nothing left to
   scroll to, so the row starts clean on the left and only grows a left
   fade once the user has actually scrolled right. */
.filter-group.can-scroll-right:not(.can-scroll-left) {
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 14px), transparent);
  mask-image: linear-gradient(to right, black calc(100% - 14px), transparent);
}
.filter-group.can-scroll-left:not(.can-scroll-right) {
  -webkit-mask-image: linear-gradient(to right, transparent, black 14px);
  mask-image: linear-gradient(to right, transparent, black 14px);
}
.filter-group.can-scroll-left.can-scroll-right {
  -webkit-mask-image: linear-gradient(to right, transparent, black 14px, black calc(100% - 14px), transparent);
  mask-image: linear-gradient(to right, transparent, black 14px, black calc(100% - 14px), transparent);
}
.filter-group::-webkit-scrollbar { height: 4px; }
.filter-group::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
.filter-group::-webkit-scrollbar-track { background: transparent; }
.filter-label {
  color: var(--muted);
  font-size: 0.85rem;
  margin-right: 0.15rem;
  flex-shrink: 0;
}
.chip {
  padding: 0.35rem 0.9rem;
  border: none;
  border-radius: 999px;
  background: var(--chip-bg);
  color: var(--chip-text);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
}
.chip:hover { background: var(--hover-surface); }
.chip.is-active {
  background: var(--chip-active-bg);
  color: var(--chip-active-text);
  font-weight: 700;
}
.chip.is-active:hover { background: var(--chip-active-bg); }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.25rem;
}
.card {
  background: transparent;
  border: none;
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.card:hover {
  background: var(--hover-surface);
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55);
}
.card:active {
  background: var(--hover-surface);
  transform: translateY(-1px) scale(0.99);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
}
.card[hidden] {
  display: none;
}
.card-thumb {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--surface-alt);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.card-thumb-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}
.card-duration {
  position: absolute;
  right: 6px;
  bottom: 6px;
  background: rgba(0,0,0,0.85);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.card-body { padding: 0.85rem 1rem 1rem; display: flex; flex-direction: column; gap: 0.4rem; flex: 1; }
.card-title { font-size: 1rem; margin: 0; line-height: 1.35; font-weight: 500; }
.card-title a { color: var(--text); }
.card-title-year {
  font-weight: 400;
  color: var(--muted);
  margin-left: 0.3em;
}
.card-meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  font-size: 0.8rem;
  color: var(--muted);
}
.tag {
  display: inline-block;
  background: var(--chip-bg);
  color: var(--muted);
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
}
.tag-award {
  background: rgba(255, 0, 0, 0.15);
  color: var(--brand);
}
.card-description {
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.4;
}
.card-play {
  margin-top: auto;
  display: block;
  text-align: center;
}
.card-play-badge {
  display: inline-block;
  width: 90%;
  height: auto;
}

.empty { color: var(--muted); }

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
}
.pagination[hidden] { display: none; }
.pagination-btn {
  padding: 0.35rem 1rem;
  border: none;
  border-radius: 999px;
  background: var(--chip-bg);
  color: var(--chip-text);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
}
.pagination-btn:hover:not(:disabled) { background: var(--hover-surface); }
.pagination-btn:disabled {
  opacity: 0.4;
  cursor: default;
}
.pagination-status {
  color: var(--muted);
  font-size: 0.85rem;
}

.site-footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 1.5rem 0;
  color: var(--muted);
  font-size: 0.85rem;
}
.site-footer .attribution {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.yt-badge { display: inline-flex; flex-shrink: 0; }
.footer-links { margin-top: 0.5rem; }
.footer-links a { color: var(--muted); }
.footer-links .sep { margin: 0 0.4rem; }

.impressum p { margin: 0 0 1rem; }
.impressum-note {
  font-style: italic;
  color: var(--muted);
  font-size: 0.85rem;
}

/* Below this width, auto-fill's 220px minimum card would collapse to a
   single column - force 2 columns instead so mobile isn't a long single
   scroll, and shrink spacing/type to keep cards from feeling cramped. */
@media (max-width: 640px) {
  .wrap { padding: 0 0.75rem; }
  .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }
  .card-body { padding: 0.6rem 0.65rem 0.75rem; gap: 0.3rem; }
  .card-title { font-size: 0.85rem; }
  .card-meta { font-size: 0.7rem; }
  .card-description { font-size: 0.72rem; }
}