/*
 * Babylon Games — black-and-red, cut for an OLED panel: true-black pixels stay
 * off, one saturated red carries every accent. Grown out of ATLAS-Games, which
 * itself grew out of SSS.css from the 2022 prototype; that navy/teal/cream
 * identity is retired here in favour of this one.
 */

:root {
  --ink-900: #000000; /* true black — OLED pixels off */
  --ink-800: #0a0a0a;
  --ink-700: #121212; /* base panel surface */
  --ink-600: #1c1c1c;
  --ink-500: #272727;
  --accent-700: #7a0016;
  --accent-600: #a3001f;
  --accent-500: #e2122f; /* the one brand red */
  --accent-400: #ff4d63;
  --accent-300: #ff96a3;
  --paper-200: #d4cdc7;
  --paper-100: #f7f4f2;
  --danger-500: #fd4646; /* distinct from --accent-500: alerts read as their own hue */
  --amber-400: #f5a623;
  --green-400: #35d483;

  --bg: var(--ink-900);
  --bg-elev: var(--ink-800);
  --panel: var(--ink-700);
  --panel-hi: var(--ink-600);
  --border: #2a1013;
  --border-soft: #170a0c;
  --text: #f7f4f2;
  --text-dim: #b8a8a4;
  --text-faint: #74605c;
  --accent: var(--accent-500);
  --accent-hi: var(--accent-400);

  /* Sharp, not rounded: 10px/16px in the old theme, cut down hard here. */
  --radius: 3px;
  --radius-lg: 6px;
  --shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.8);
  --glow-accent: 0 0 0 3px rgba(226, 18, 47, 0.32);
  --header-h: 62px;
  --font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, 'Cascadia Code', 'Consolas', 'SF Mono', monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(1100px 550px at 12% -10%, rgba(226, 18, 47, 0.14), transparent 60%),
    radial-gradient(800px 460px at 100% 0%, rgba(122, 0, 22, 0.22), transparent 55%),
    var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 450;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-300); text-decoration: none; }
a:hover { color: var(--paper-100); }

h1, h2, h3, h4 { margin: 0 0 0.5rem; line-height: 1.2; font-weight: 800; letter-spacing: -0.02em; }
h1 { font-size: 1.7rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }

p { margin: 0 0 0.9rem; }
img { max-width: 100%; display: block; }
svg { flex: none; }

::selection { background: var(--accent-500); color: #fff; }

.container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 20px; }
.container--narrow { max-width: 720px; }

/* ---------- header ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  background: rgba(6, 6, 6, 0.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-soft);
}

.topbar__inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 18px;
  /* Flex children default to min-width:auto and refuse to shrink below their
     content. Without min-width:0 on this row and on .search, a narrow window
     pushes the nav straight over the search box instead of squeezing it. */
  min-width: 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 1.06rem;
  font-weight: 700;
  color: var(--paper-100);
  letter-spacing: 0.02em;
  white-space: nowrap;
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
}
.brand:hover { color: var(--accent-300); }
.brand svg { color: var(--accent-400); }
.brand__sub {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  border-left: 1px solid var(--border);
  padding-left: 9px;
  margin-left: 2px;
}

/* Never shrinks: the nav is the fixed anchor the search box gives way to. */
.topnav { display: flex; align-items: center; gap: 4px; margin-left: auto; flex: 0 0 auto; }

.topnav a {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border-radius: var(--radius);
  color: var(--text-dim);
  font-size: 0.9rem;
  font-weight: 550;
  transition: background 0.15s, color 0.15s;
}
.topnav a:hover { background: var(--panel-hi); color: var(--text); }
.topnav a.is-active { background: var(--accent-600); color: var(--paper-100); }

.topnav__label { display: inline; }

/* ---------- search ---------- */

.search {
  position: relative;
  /* Basis 0 so it takes leftover space rather than demanding its content
     width, and min-width:0 so it can actually give that space back. */
  flex: 1 1 0;
  min-width: 0;
  max-width: 460px;
}
.search svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-faint);
  pointer-events: none;
}
/*
 * Must out-specify the generic `input[type='search']` rule in the controls
 * section further down. Both `.search input` and `input[type='search']` score
 * (0,1,1), so the later one was winning and replacing the 38px left padding
 * with 11px — putting the placeholder text directly under the magnifier.
 * Adding the attribute here makes this (0,2,1) and settles it.
 */
.search input[type='search'] {
  width: 100%;
  padding: 9px 14px 9px 40px;
  background: var(--ink-700);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  /* Safari puts its own decoration on search inputs. */
  -webkit-appearance: none;
  appearance: none;
}
.search input[type='search']::-webkit-search-decoration,
.search input[type='search']::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
.search input::placeholder { color: var(--text-faint); }
.search input[type='search']:focus {
  outline: none;
  border-color: var(--accent-500);
  box-shadow: 0 0 0 3px rgba(226, 18, 47, 0.22);
}

/* ---------- layout ---------- */

.page { padding: 28px 0 80px; }

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.page-head p { margin: 0; color: var(--text-dim); font-size: 0.9rem; }

.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 14px;
  margin-bottom: 22px;
  background: rgba(10, 10, 10, 0.7);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
}
.toolbar__group { display: flex; align-items: center; gap: 8px; }
.toolbar__spacer { flex: 1 1 auto; }
.toolbar__label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ---------- controls ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel-hi);
  color: var(--text);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s, color 0.15s;
  white-space: nowrap;
}
.btn:hover { background: var(--ink-500); border-color: var(--accent-600); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

.btn--primary {
  background: var(--accent-500);
  border-color: var(--accent-600);
  color: #fff;
  font-weight: 700;
}
/* Deepens and glows on hover rather than lightening — the old teal scheme paled
   toward the highlight; a saturated red reads as more "on" the darker it gets. */
.btn--primary:hover {
  background: var(--accent-600);
  border-color: var(--accent-400);
  box-shadow: var(--glow-accent);
  color: #fff;
}

.btn--ghost { background: transparent; }
.btn--ghost:hover { background: var(--panel-hi); }

.btn--danger { border-color: rgba(253, 70, 70, 0.4); color: #ff9b9b; }
.btn--danger:hover { background: rgba(253, 70, 70, 0.16); border-color: var(--danger-500); color: #fff; }

.btn--lg { padding: 13px 24px; font-size: 0.98rem; }
.btn--sm { padding: 6px 11px; font-size: 0.8rem; }
.btn--icon { padding: 8px; }

select, input[type='text'], input[type='password'], input[type='number'], input[type='search'], textarea {
  padding: 8px 11px;
  background: var(--ink-700);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font: inherit;
  font-size: 0.88rem;
  width: 100%;
}
select { cursor: pointer; padding-right: 28px; }
textarea { resize: vertical; min-height: 96px; line-height: 1.6; }

select:focus, input:focus, textarea:focus {
  outline: none;
  border-color: var(--accent-500);
  box-shadow: 0 0 0 3px rgba(226, 18, 47, 0.2);
}

.field { margin-bottom: 14px; }
.field label {
  display: block;
  margin-bottom: 5px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.field__hint { font-size: 0.78rem; color: var(--text-faint); margin-top: 5px; }

/* A checkbox reads as a sentence, not as a captioned field, so it opts out of
   the uppercase label styling above. */
.field-check {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 16px;
  cursor: pointer;
  user-select: none;
}
.field-check input[type='checkbox'] {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  accent-color: var(--accent-500);
  cursor: pointer;
}
.field-check span { font-size: 0.86rem; color: var(--text-dim); }
.field-check:hover span { color: var(--text); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.select-inline { width: auto; min-width: 130px; }

/* ---------- chips ---------- */

.chips { display: flex; flex-wrap: wrap; gap: 7px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-dim);
  font-size: 0.8rem;
  font-weight: 550;
  cursor: pointer;
  transition: all 0.15s;
}
.chip:hover { border-color: var(--accent-500); color: var(--text); }
.chip.is-active {
  background: var(--accent-600);
  border-color: var(--accent-400);
  color: var(--paper-100);
}
.chip__count {
  font-size: 0.7rem;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.chip.is-active .chip__count { color: var(--accent-300); }

/*
 * Escape hatch for filters that outlive the page visit. Filled rather than
 * outlined: a filter set on another device days ago is otherwise invisible,
 * and the library just looks like it lost most of its games.
 */
.chip--clear {
  background: rgba(253, 70, 70, 0.16);
  border-color: rgba(253, 70, 70, 0.5);
  color: #ffb3b3;
  font-weight: 650;
}
.chip--clear:hover {
  background: var(--danger-500);
  border-color: var(--danger-500);
  color: #fff;
}
/* Once filters are actually withholding items, stop being subtle. */
.chip--clear.is-loud {
  background: var(--danger-500);
  border-color: var(--danger-500);
  color: #fff;
  animation: clear-pulse 2.4s ease-in-out 3;
}
@keyframes clear-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(253, 70, 70, 0); }
  50%      { box-shadow: 0 0 0 5px rgba(253, 70, 70, 0.25); }
}

.tag {
  display: inline-flex;
  padding: 3px 9px;
  background: rgba(226, 18, 47, 0.18);
  border: 1px solid rgba(226, 18, 47, 0.35);
  border-radius: 999px;
  color: var(--accent-300);
  font-size: 0.74rem;
  font-weight: 600;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  background: rgba(0, 0, 0, 0.82);
  color: var(--paper-200);
  backdrop-filter: blur(4px);
}
.badge--missing { background: rgba(253, 70, 70, 0.9); color: #fff; }
/* Neutral, not accent-red: every folder card would otherwise carry a red
   badge, and a colour meant to signal "brand" or "action" stops doing that
   the moment it is also just wallpaper. */
.badge--folder { background: rgba(255, 255, 255, 0.14); color: var(--paper-100); }
.badge--warn { background: rgba(224, 164, 88, 0.9); color: #2a1c06; }
.badge--ok { background: rgba(111, 191, 139, 0.9); color: #08210f; }

/* ---------- library grid ---------- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 20px;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: inherit;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--accent-500);
  box-shadow: var(--shadow-lg);
  color: inherit;
}

.card__art {
  position: relative;
  aspect-ratio: 3 / 4;
  background: linear-gradient(150deg, var(--ink-600), var(--ink-800));
  overflow: hidden;
}
/*
 * The image must be positioned, not static. The fallback placeholder beneath it
 * is `position: absolute`, and positioned elements paint above non-positioned
 * siblings regardless of DOM order — a static <img> ends up *underneath* the
 * placeholder, so every cover was hidden behind its own "no artwork" label.
 * Positioning the image puts both in the same layer, where DOM order decides:
 * fallback, then image, then badges and the favourite star on top.
 */
.card__art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.card:hover .card__art img { transform: scale(1.05); }

.card__fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--text-faint); /* empty-state icon — grey, so red stays reserved for real accents */
  text-align: center;
  padding: 14px;
}
.card__fallback span {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.card__badges {
  position: absolute;
  top: 9px;
  left: 9px;
  right: 9px;
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  pointer-events: none;
}
.card__fav {
  position: absolute;
  top: 9px;
  right: 9px;
  color: var(--amber-400);
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.8));
}

.card__body { padding: 11px 13px 13px; display: flex; flex-direction: column; gap: 5px; }
.card__title {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 650;
  line-height: 1.3;
  color: var(--paper-100);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card__meta {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.76rem;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.card__meta span { white-space: nowrap; }
.card__dot { color: var(--border); }

/* section heading inside the grid, for the grouped folders/files view */
.group-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 9px;
  margin-top: 6px;
  border-bottom: 1px solid var(--border-soft);
}
.group-head:first-child { margin-top: 0; }
.group-head svg { color: var(--accent-400); }
.group-head h2 {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.group-head__count { margin-left: auto; font-size: 0.8rem; color: var(--text-faint); font-variant-numeric: tabular-nums; }

/* list view */
.grid.is-list { grid-template-columns: 1fr; gap: 8px; }
.grid.is-list .group-head { margin-top: 14px; }
.grid.is-list .card { flex-direction: row; align-items: center; border-radius: var(--radius); }
.grid.is-list .card:hover { transform: none; }
.grid.is-list .card__art { width: 58px; aspect-ratio: 1; flex: none; border-radius: 6px; margin: 8px; }
.grid.is-list .card__badges { display: none; }
.grid.is-list .card__fav { position: static; margin-right: 12px; }
.grid.is-list .card__body { flex-direction: row; align-items: center; gap: 16px; flex: 1; padding: 8px 14px 8px 0; min-width: 0; }
.grid.is-list .card__title { -webkit-line-clamp: 1; flex: 1; min-width: 0; }
.grid.is-list .card__meta { flex: none; }

/* ---------- panels ---------- */

.panel {
  background: rgba(10, 10, 10, 0.72);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 20px;
}
.panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.panel__head h2, .panel__head h3 { margin: 0; }
.panel__title-row { display: flex; align-items: center; gap: 9px; }
.panel__title-row svg { color: var(--accent-400); }

.stack { display: flex; flex-direction: column; gap: 20px; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.row--end { justify-content: flex-end; }

/* ---------- game detail ---------- */

.hero { display: grid; grid-template-columns: 280px 1fr; gap: 30px; margin-bottom: 28px; }

.hero__art {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(150deg, var(--ink-600), var(--ink-800));
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
}
/* Same stacking fix as .card__art img — see the note there. */
.hero__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__art-actions {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  gap: 6px;
  padding: 10px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.92));
  opacity: 0;
  transition: opacity 0.2s;
}
.hero__art:hover .hero__art-actions { opacity: 1; }
/* A touch screen never hovers, so there the buttons are simply always shown. */
@media (hover: none) { .hero__art-actions { opacity: 1; } }

.hero__title { font-size: 2rem; margin-bottom: 8px; color: var(--paper-100); }
.hero__sub { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; color: var(--text-dim); font-size: 0.88rem; margin-bottom: 18px; }
.hero__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }

.meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--border-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  overflow: hidden;
}
.meta-cell { background: var(--panel); padding: 11px 14px; }
.meta-cell dt {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 3px;
}
.meta-cell dd {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  overflow-wrap: anywhere;
}

.prose { color: var(--text-dim); line-height: 1.7; white-space: pre-wrap; }
.prose:empty::after { content: 'Nothing written yet.'; color: var(--text-faint); font-style: italic; }

video {
  width: 100%;
  border-radius: var(--radius);
  background: #000;
  border: 1px solid var(--border);
}

/* ---------- tables ---------- */

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

table { width: 100%; border-collapse: collapse; font-size: 0.87rem; }
thead th {
  position: sticky;
  top: 0;
  background: var(--ink-600);
  padding: 9px 13px;
  text-align: left;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
}
tbody td { padding: 9px 13px; border-top: 1px solid var(--border-soft); vertical-align: middle; }
tbody tr:hover { background: rgba(58, 20, 25, 0.3); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-size: 0.82rem; }
.nowrap { white-space: nowrap; }
.dim { color: var(--text-faint); }

.file-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.file-row svg { color: var(--text-faint); }
.file-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.crumbs { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; font-size: 0.84rem; margin-bottom: 12px; }
.crumbs button {
  background: none;
  border: none;
  color: var(--accent-300);
  font: inherit;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
}
.crumbs button:hover { background: var(--panel-hi); color: var(--paper-100); }
.crumbs span { color: var(--text-faint); }

/* ---------- stats ---------- */

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }

.stat {
  background: rgba(10, 10, 10, 0.72);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
}
.stat__label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 6px;
}
.stat__value {
  font-size: 1.65rem;
  font-weight: 700;
  color: var(--paper-100);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.stat__hint { font-size: 0.78rem; color: var(--text-dim); margin-top: 4px; }

.bar-list { display: flex; flex-direction: column; gap: 12px; }
.bar-item__head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.85rem;
  margin-bottom: 5px;
}
.bar-item__head strong { font-weight: 600; }
.bar-track { height: 7px; background: var(--ink-600); border-radius: 999px; overflow: hidden; }
.bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent-600), var(--accent-400)); border-radius: 999px; }

/* ---------- progress ---------- */

.progress { height: 8px; background: var(--ink-600); border-radius: 999px; overflow: hidden; }
.progress__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-500), var(--accent-300));
  border-radius: 999px;
  transition: width 0.25s ease;
}
.progress__fill.is-error { background: var(--danger-500); }
.progress__fill.is-done { background: var(--green-400); }

/* ---------- dropzone ---------- */

.dropzone {
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg);
  padding: 46px 24px;
  text-align: center;
  background: rgba(10, 10, 10, 0.45);
  transition: all 0.2s;
  cursor: pointer;
}
.dropzone:hover, .dropzone.is-over {
  border-color: var(--accent-400);
  background: rgba(226, 18, 47, 0.12);
}
.dropzone svg { color: var(--accent-500); margin: 0 auto 14px; }
.dropzone h3 { color: var(--paper-100); }
.dropzone p { color: var(--text-dim); margin: 0; font-size: 0.88rem; }

.queue-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 14px;
  padding: 14px 16px;
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  margin-bottom: 10px;
}
.queue-item__name { font-weight: 600; font-size: 0.9rem; overflow-wrap: anywhere; }
.queue-item__stat { font-size: 0.8rem; color: var(--text-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.queue-item__bar { grid-column: 1 / -1; }
.queue-item__actions { display: flex; gap: 6px; }

/* ---------- auth screens ---------- */

.auth-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 40px 20px;
}
.auth-card {
  width: 100%;
  max-width: 400px;
  background: rgba(10, 10, 10, 0.9);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-lg);
}
.auth-card__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  margin-bottom: 6px;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--paper-100);
}
.auth-card__brand svg { color: var(--accent-400); }
.auth-card__tagline {
  text-align: center;
  color: var(--text-faint);
  font-size: 0.82rem;
  margin-bottom: 26px;
}

/* ---------- feedback ---------- */

.alert {
  padding: 11px 14px;
  border-radius: var(--radius);
  font-size: 0.87rem;
  margin-bottom: 14px;
  border: 1px solid transparent;
}
.alert--error { background: rgba(253, 70, 70, 0.12); border-color: rgba(253, 70, 70, 0.4); color: #ffb3b3; }
.alert--ok { background: rgba(111, 191, 139, 0.12); border-color: rgba(111, 191, 139, 0.4); color: #a8e0bd; }
.alert--info { background: rgba(226, 18, 47, 0.14); border-color: rgba(226, 18, 47, 0.4); color: var(--accent-300); }
.alert--warn { background: rgba(224, 164, 88, 0.12); border-color: rgba(224, 164, 88, 0.4); color: #f0c68f; }
.alert[hidden] { display: none; }

.toasts {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 9px;
  max-width: min(380px, calc(100vw - 40px));
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 15px;
  background: var(--ink-600);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-400);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  font-size: 0.87rem;
  animation: toast-in 0.22s ease;
}
.toast--error { border-left-color: var(--danger-500); }
.toast--ok { border-left-color: var(--green-400); }
.toast.is-leaving { animation: toast-out 0.18s ease forwards; }

@keyframes toast-in { from { opacity: 0; transform: translateX(24px); } }
@keyframes toast-out { to { opacity: 0; transform: translateX(24px); } }

.empty {
  padding: 60px 24px;
  text-align: center;
  color: var(--text-faint);
}
.empty svg { color: var(--ink-500); margin: 0 auto 16px; }
.empty h3 { color: var(--text-dim); }

.skeleton {
  background: linear-gradient(90deg, var(--ink-700) 25%, var(--ink-600) 50%, var(--ink-700) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.3s infinite;
  border-radius: var(--radius-lg);
}
@keyframes shimmer { to { background-position: -200% 0; } }

.spinner {
  width: 15px;
  height: 15px;
  border: 2px solid var(--border);
  border-top-color: var(--accent-300);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex: none;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- pagination ---------- */

.pager { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 32px; flex-wrap: wrap; }
.pager button {
  min-width: 38px;
  padding: 7px 11px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-dim);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
}
.pager button:hover:not(:disabled) { border-color: var(--accent-500); color: var(--text); }
.pager button.is-active { background: var(--accent-600); border-color: var(--accent-400); color: var(--paper-100); }
.pager button:disabled { opacity: 0.35; cursor: not-allowed; }
.pager__info { color: var(--text-faint); font-size: 0.84rem; margin: 0 10px; }

/* ---------- featured carousel ---------- */

.featured { margin-bottom: 26px; }
.featured__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.featured__head h2 { font-size: 1.05rem; font-weight: 800; letter-spacing: -0.01em; margin: 0; }

/* Peek, stage, peek — the side columns show the neighbouring art, which is what
   makes the strip read as a carousel rather than a panel with two buttons. */
.featured__stage { display: grid; grid-template-columns: 116px 1fr 116px; gap: 10px; align-items: stretch; }

.featured__peek {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background-color: var(--ink-800);
  background-size: cover;
  background-position: center;
  cursor: pointer;
  padding: 0;
  overflow: hidden;
}
.featured__peek::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.72); transition: background 0.18s; }
.featured__peek:hover::after { background: rgba(0, 0, 0, 0.5); }
.featured__peek:hover { border-color: var(--accent-500); }
.featured__chevron { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; color: var(--text-dim); }
.featured__peek:hover .featured__chevron { color: var(--accent-400); }

.featured__viewport { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); }
.featured__slide { display: grid; grid-template-columns: 1fr 330px; min-height: 384px; text-decoration: none; color: inherit; }

.featured__art { position: relative; overflow: hidden; background: var(--ink-900); container-type: size; }
/* Covers are portrait and this frame is landscape, so the art is contained and
   a blurred copy fills the gap rather than cropping the poster in half. */
.featured__blur { position: absolute; inset: -40px; background-size: cover; background-position: center; filter: blur(34px) saturate(1.3); opacity: 0.5; }
.featured__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
/* Wide art (about 2.1:1) carries the game's logo, often near its edges, so it
   stays whole over its blur, and only fills the frame when the frame is nearly
   as wide and next to nothing is lost. */
@container (min-aspect-ratio: 2 / 1) {
  .featured__img--wide { object-fit: cover; }
}
.featured__blank { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-faint); }
.featured__wordmark {
  position: absolute;
  inset: auto 0 0 0;
  padding: 34px 20px 16px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.92), transparent);
}
.featured__wordmark span { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }

.featured__panel { background: var(--panel); padding: 18px; display: flex; flex-direction: column; gap: 12px; border-left: 1px solid var(--border); }
.featured__name { margin: 0; font-size: 1.1rem; font-weight: 700; }
.featured__verdict { display: flex; align-items: baseline; gap: 8px; font-size: 0.84rem; flex-wrap: wrap; }
.featured__starred { color: var(--accent-400); font-weight: 700; }
.featured__avail { color: var(--green-400); font-weight: 700; }
.featured__downloads { color: var(--text-faint); }

.featured__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.featured__fact { background: var(--ink-800); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 8px 10px; min-width: 0; }
.featured__fact-k { display: block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); }
.featured__fact-v { display: block; font-size: 0.86rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.featured__why { margin: 0; font-size: 0.82rem; color: var(--text-dim); }
.featured__tags { display: flex; flex-wrap: wrap; gap: 5px; }
.featured__tag { background: var(--ink-600); border-radius: var(--radius); padding: 3px 8px; font-size: 0.74rem; color: var(--text-dim); }

.featured__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.featured__size { background: var(--accent-600); color: var(--paper-100); font-weight: 700; font-size: 0.82rem; padding: 4px 9px; border-radius: var(--radius); }
.featured__cta { display: inline-flex; align-items: center; gap: 6px; font-size: 0.86rem; font-weight: 700; color: var(--text-dim); }
.featured__slide:hover .featured__cta { color: var(--accent-400); }

.featured__dots { display: flex; justify-content: center; gap: 5px; margin-top: 10px; }
.featured__dot { width: 16px; height: 6px; padding: 0; border: none; border-radius: 1px; background: var(--ink-500); cursor: pointer; }
.featured__dot:hover { background: var(--text-faint); }
.featured__dot.is-active { background: var(--accent-500); }

@media (max-width: 900px) {
  .featured__stage { grid-template-columns: 1fr; }
  .featured__peek { display: none; }
  .featured__slide { grid-template-columns: 1fr; min-height: 0; }
  .featured__art { aspect-ratio: 16 / 9; }
  .featured__panel { border-left: none; border-top: 1px solid var(--border); }
}

/* ---------- modal ---------- */

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: rgba(6, 8, 16, 0.72);
  backdrop-filter: blur(3px);
  display: grid;
  place-items: center;
  padding: 24px;
}
.modal-backdrop[hidden] { display: none; }
.modal {
  width: 100%;
  max-width: 560px;
  max-height: 85vh;
  overflow-y: auto;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-lg);
}
.modal__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.modal__head h2 { margin: 0; }
.modal--wide { max-width: 760px; }

/* ---------- artwork dialog ---------- */

.art-slots { display: grid; grid-template-columns: 216px 1fr; gap: 24px; align-items: start; }
.art-slot { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.art-slot__head h3 { margin: 0 0 2px; font-size: 0.95rem; font-weight: 700; }
.art-slot__head span { font-size: 0.78rem; color: var(--text-faint); }
.art-slot__frame {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--ink-800);
}
.art-slot__frame--cover { aspect-ratio: 3 / 4; }
.art-slot__frame--wide { aspect-ratio: 920 / 430; }
.art-slot__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* An uploaded wide image may be any shape; show all of it. */
.art-slot__frame--wide img { object-fit: contain; }
.art-slot__actions { display: flex; flex-wrap: wrap; gap: 6px; }
.art-slot__note { margin: 0; font-size: 0.78rem; color: var(--text-faint); }

@media (max-width: 620px) {
  .art-slots { grid-template-columns: 1fr; }
  .art-slot__frame--cover { max-width: 170px; }
}

/* ---------- cover picker ---------- */

.cover-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 14px;
}

.cover-option {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 0;
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.cover-option:disabled { opacity: 0.4; cursor: default; }
.cover-grid--wide { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.cover-grid--wide .cover-option__art { aspect-ratio: 920 / 430; }

.cover-option__art {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink-600);
  border: 2px solid transparent;
  transition: border-color 0.15s, transform 0.15s;
}
.cover-option:hover:not(:disabled) .cover-option__art { border-color: var(--accent-400); transform: translateY(-3px); }
.cover-option:focus-visible .cover-option__art { border-color: var(--accent-300); outline: none; }

/* Positioned, so it paints above the fallback beneath it. */
.cover-option__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cover-option__fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--text-faint); /* empty-state icon — grey, so red stays reserved for real accents */
}

.cover-option__score {
  position: absolute;
  top: 5px;
  right: 5px;
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(3px);
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--text-dim);
}
.cover-option__score.is-strong { background: rgba(226, 18, 47, 0.92); color: #fff; }

.cover-option__name {
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cover-option__src { font-size: 0.68rem; color: var(--text-faint); }

.cover-option.is-busy .cover-option__art {
  border-color: var(--accent-300);
  animation: shimmer 1.1s infinite;
  background: linear-gradient(90deg, var(--ink-700) 25%, var(--ink-500) 50%, var(--ink-700) 75%);
  background-size: 200% 100%;
}

.copy-field { display: flex; gap: 8px; min-width: 0; }
/* Same min-width:0 story as the header: without it the input holds its
   intrinsic width and shoves the button out of the dialog. */
.copy-field input { flex: 1 1 0; min-width: 0; font-family: var(--mono); font-size: 0.78rem; }
.copy-field .btn { flex: 0 0 auto; }
/* The cover search box takes normal prose, not a URL. */
#cover-search-form .copy-field input { font-family: var(--font); font-size: 0.88rem; }

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

.footer {
  border-top: 1px solid var(--border-soft);
  padding: 22px 0 30px;
  margin-top: 40px;
  color: var(--text-faint);
  font-size: 0.82rem;
}
.footer__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.footer a { color: var(--text-dim); }
.footer a:hover { color: var(--accent-300); }

/* ---------- utility ---------- */

.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;
}
[hidden] { display: none !important; }
.text-dim { color: var(--text-dim); }
.text-faint { color: var(--text-faint); }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-2 { margin-top: 18px; }
.grow { flex: 1 1 auto; }

/* ---------- responsive ---------- */

/* Shed header ornament before the row gets tight, so the search box keeps a
   usable width instead of being squeezed to nothing. */
@media (max-width: 1040px) {
  .brand__sub { display: none; }
}

@media (max-width: 880px) {
  .topnav__label { display: none; }
  .topbar__inner { gap: 12px; }
}

@media (max-width: 900px) {
  .hero { grid-template-columns: 200px 1fr; gap: 20px; }
  .hero__title { font-size: 1.5rem; }
}

@media (max-width: 720px) {
  .topnav__label { display: none; }
  .brand__sub { display: none; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
  .hero { grid-template-columns: 1fr; }
  .hero__art { max-width: 220px; }
  .field-row { grid-template-columns: 1fr; }
  .container { padding: 0 14px; }
}

/* ---------- folder picker ---------- */

/*
 * Whole-row buttons, so the click target is the row rather than the text.
 * Picking a library root by walking the disk beats typing a path that has to
 * be exactly right.
 */
.browse-row {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 3px 0;
  background: none;
  border: none;
  color: var(--text);
  font: inherit;
  font-size: 0.88rem;
  text-align: left;
  cursor: pointer;
}
.browse-row:hover { color: var(--accent-300); }
.browse-row svg { color: var(--accent-500); }
.browse-row:hover svg { color: var(--accent-300); }

#browse-list td { padding: 5px 13px; }
#browse-crumbs { margin-bottom: 12px; }

/* ---------- logos and backgrounds ---------- */

/* The game's background behind the top of its page, the full width, fading out
   into the page. The page's own content stays above it. */
main.page { position: relative; }
main.page > .container { position: relative; z-index: 1; }
.game-backdrop {
  position: absolute;
  inset: 0 0 auto 0;
  height: min(64vh, 560px);
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: linear-gradient(#000 30%, transparent);
  mask-image: linear-gradient(#000 30%, transparent);
}
.game-backdrop img { width: 100%; height: 100%; object-fit: cover; object-position: center top; opacity: 0.42; }

/* The logo in place of the title; the title stays for screen readers. */
.hero__title--logo { margin-bottom: 14px; }
.hero__logo {
  display: block;
  max-width: min(100%, 460px);
  max-height: 140px;
  object-fit: contain;
  object-position: left bottom;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.6));
}
.hero__title--logo .hero__title-text {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* The artwork dialog's logo and background frames. */
.art-slot__frame--logo { aspect-ratio: 16 / 10; background: repeating-conic-gradient(var(--ink-700) 0% 25%, var(--ink-800) 0% 50%) 50% / 16px 16px; }
.art-slot__frame--logo img { object-fit: contain; padding: 10px; }
.art-slot__frame--hero { aspect-ratio: 1920 / 620; }

/* The SteamGridDB browser: a game, then its images of one kind. */
.sgdb-hint { font-size: 0.8rem; margin: 0 0 10px; }
.sgdb-games { display: flex; flex-direction: column; gap: 6px; max-height: 52vh; overflow: auto; }
.sgdb-game {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 13px;
  background: var(--ink-800);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
}
.sgdb-game:hover, .sgdb-game:focus-visible { border-color: var(--accent-400); color: var(--paper-100); outline: none; }
.sgdb-game svg { color: var(--text-faint); flex: none; }
.sgdb-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; font-size: 0.84rem; }
#sgdb-results .cover-grid { max-height: 56vh; overflow: auto; padding: 4px 2px; }
.cover-grid--cover .cover-option__art { aspect-ratio: 2 / 3; }
.cover-grid--logo { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.cover-grid--logo .cover-option__art {
  aspect-ratio: 16 / 10;
  background: repeating-conic-gradient(var(--ink-700) 0% 25%, var(--ink-800) 0% 50%) 50% / 14px 14px;
}
.cover-grid--logo .cover-option__art img { object-fit: contain; padding: 8px; }
.cover-grid--hero { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.cover-grid--hero .cover-option__art { aspect-ratio: 1920 / 620; }

/* The featured carousel with the game's background and logo, as Babylon's apps show it. */
.featured__img--hero { object-fit: cover; }
.featured__wordmark--logo img {
  display: block;
  max-width: min(72%, 420px);
  max-height: 118px;
  object-fit: contain;
  object-position: left bottom;
  filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.7));
}

/* SteamGridDB's tags on each picture, and NSFW blurred until clicked (game.js). */
.cover-option__art video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sgdb-tags {
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  pointer-events: none;
}
.sgdb-tag {
  padding: 2px 5px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.sgdb-tag.is-nsfw { background: #d01f3c; }
.sgdb-tag.is-animated { background: rgba(226, 18, 47, 0.92); }
.sgdb-tag.is-uhd { background: #f2f2f2; color: #000; }
.sgdb-tag.is-humor { background: #b36b00; }
.sgdb-tag.is-epilepsy { background: #7a3cc4; }
.sgdb-tag.is-style { background: rgba(0, 0, 0, 0.6); color: rgba(255, 255, 255, 0.85); font-weight: 600; }
.cover-option__art.is-blurred img,
.cover-option__art.is-blurred video { filter: blur(16px) brightness(0.6); transform: scale(1.12); }
.cover-option__art.is-blurred::after {
  content: "NSFW · click to show";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 8px;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 3px #000;
  pointer-events: none;
}

/* ---------- library bar, as Babylon Desktop's Browse ----------
   Row one: Source and Tag dropdowns, Platform, Type and Show checklists, Sort at the
   end. Row two: the count, a pill per filter and Clear all, then card size, grid or
   list, and per page. A field set away from its default is outlined in the accent. */

.browsebar { display: flex; flex-direction: column; gap: 14px; margin-bottom: 22px; padding-bottom: 16px; border-bottom: 1px solid var(--border-soft); }
.browsebar__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.browsebar__results { justify-content: space-between; gap: 10px 16px; min-height: 34px; }
.browsebar__info { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.browsebar__tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.browsebar__spacer { flex: 1 1 auto; }
.browsebar__count { margin-right: 4px; font-size: 0.82rem; font-weight: 650; color: var(--text); white-space: nowrap; }
.browsebar__pills { display: contents; }

.filter {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 0 0 11px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: border-color 0.15s;
}
.filter:hover { border-color: var(--accent-600); }
.filter.is-set, .filter.is-open { border-color: var(--accent-500); }
.filter__caption {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
}
.filter.is-set .filter__caption { color: var(--accent-300); }
.filter .filter__select {
  height: 32px;
  min-width: 0;
  padding: 0 28px 0 8px;
  background-color: transparent;
  border: 0;
  box-shadow: none;
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 600;
}
.filter .filter__select:focus { box-shadow: none; }
.filter:focus-within { box-shadow: var(--glow-accent); }
.filter .filter__select option { background: var(--panel); color: var(--text); }

.checklist { padding: 0; }
.checklist__button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 30px 0 11px;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23b8a8a4' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
  border: 0;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.checklist__value { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.86rem; font-weight: 600; }
.checklist__menu {
  position: absolute;
  top: calc(100% + 6px);
  left: -1px;
  z-index: 30;
  display: flex;
  flex-direction: column;
  min-width: 260px;
  max-height: min(62vh, 460px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.checklist__menu[hidden] { display: none; }
.checklist__item {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  column-gap: 11px;
  align-items: center;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  border-radius: var(--radius);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.checklist__item:hover, .checklist__item:focus-visible { background: var(--panel-hi); outline: none; }
.checklist__item[aria-disabled='true'] { cursor: default; }
.checklist__box { grid-row: 1 / span 2; position: relative; width: 18px; height: 18px; border: 1.5px solid var(--text-dim); border-radius: 4px; }
.checklist__item.is-on .checklist__box { background: var(--accent-500); border-color: var(--accent-500); }
.checklist__item.is-on .checklist__box::after { content: ''; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.checklist__item[aria-disabled='true'] .checklist__box { opacity: 0.6; }
.checklist__text { font-size: 0.84rem; font-weight: 600; }
.checklist__count { grid-column: 3; grid-row: 1; margin-left: 12px; font-size: 0.75rem; font-weight: 600; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.checklist__hint { grid-column: 2 / span 2; font-size: 0.74rem; color: var(--text-dim); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  background: rgba(226, 18, 47, 0.14);
  border: 1px solid rgba(226, 18, 47, 0.45);
  border-radius: 999px;
  color: var(--paper-100);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}
.pill:hover { background: rgba(226, 18, 47, 0.26); }
.pill-clear { background: none; border: 0; padding: 0 4px; color: var(--text-dim); font: inherit; font-size: 0.78rem; font-weight: 600; text-decoration: underline; cursor: pointer; }
.pill-clear:hover { color: var(--text); }

.sizebtn {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  color: var(--text);
  cursor: pointer;
}
.sizebtn:hover { border-color: var(--accent-600); }
.segment { display: inline-flex; padding: 2px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.segment button { height: 28px; padding: 0 12px; background: transparent; border: 0; border-radius: var(--radius); color: var(--text-dim); font: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer; }
.segment button:hover { color: var(--text); }
.segment button.is-active { background: var(--accent-600); color: var(--paper-100); }

.pager--top { margin: -8px 0 20px; }
.pager:empty { display: none; }

/* Card size: the grid's column width, and the list's cover and row height. */
.grid[data-size='s'] { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
.grid[data-size='l'] { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 24px; }
.grid.is-list[data-size] { grid-template-columns: 1fr; }
.grid.is-list[data-size='s'] { gap: 5px; }
.grid.is-list[data-size='s'] .card__art { width: 40px; margin: 5px; }
.grid.is-list[data-size='s'] .card__title { font-size: 0.85rem; }
.grid.is-list[data-size='l'] .card__art { width: 84px; margin: 10px; }
.grid.is-list[data-size='l'] .card__title { font-size: 1.02rem; }