.catalog [hidden] { display: none !important; }
.catalog-intro, .catalog-count, .catalog-meta, .catalog-platforms { color: var(--text-muted); }
.catalog-intro { display: flex; align-items: center; gap: 1rem; background: #000; padding: clamp(1.25rem, 3vw, 2rem); border-left: 2px solid var(--accent-soft); }
.catalog-intro-icon { display: grid; place-items: center; flex: 0 0 1.75rem; height: 1.75rem; border: 1px solid var(--border-strong); border-radius: 50%; color: var(--text); font-size: 1rem; font-weight: 500; line-height: 1; }
.catalog-intro p { max-width: 42rem; margin: 0; font-size: .9rem; line-height: 1.7; }
.catalog-controls { display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; padding: 1.25rem; margin-top: 1.5rem; border: 1px solid var(--border); border-radius: var(--radius); background: #000; box-shadow: var(--shadow); }
.catalog-controls label { display: flex; flex-direction: column; gap: .4rem; font-size: .75rem; color: var(--text-muted); }
.catalog-search { flex: 1 1 18rem; }
.catalog-controls input, .catalog-controls select, .catalog-controls button { min-height: 44px; border: 1px solid var(--border); border-radius: var(--radius); padding: .6rem .75rem; background: #080808; color: var(--text); font: inherit; font-size: .85rem; }
.catalog-controls select { max-width: 100%; }
.catalog-controls input { width: 100%; box-sizing: border-box; }
.catalog-controls button { cursor: pointer; }
.catalog-controls :focus-visible, .catalog-links a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.catalog-count { font-size: .8rem; margin: 1rem 0; }
.catalog-list { display: grid; gap: .9rem; }
.catalog-entry { display: grid; grid-template-columns: 144px minmax(0, 1fr); gap: 1.5rem; padding: 1.15rem; background: #000; }
.catalog-cover { width: 144px; height: auto; aspect-ratio: 460 / 215; object-fit: contain; align-self: start; box-sizing: border-box; }
.catalog-cover-placeholder { display: grid; place-items: center; background: var(--surface); color: var(--text-subtle); font-family: var(--font-display); font-size: 1.5rem; }
.catalog-entry h2 { font-family: var(--font-display); font-weight: 500; font-size: 1.65rem; line-height: 1.2; margin: 0 0 .4rem; }
.catalog-entry p { margin: .4rem 0; }
.catalog-entry-body { overflow-wrap: anywhere; }
.catalog-meta, .catalog-platforms { font-size: .8rem; }
.catalog-meta span { margin: 0 .4rem; }
.catalog-description { font-size: .9rem; }
.catalog-tags { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: .65rem 0; list-style: none; }
.catalog-tags li { border: 1px solid var(--border); padding: .1rem .5rem; font-size: .7rem; color: var(--text-muted); }
.catalog-tags li::before { content: none; display: none; }
.catalog-links { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.catalog-empty { padding: 3rem 1rem; border: 1px solid var(--border); text-align: center; background: var(--surface); }
.catalog-empty h2 { font-family: var(--font-display); font-size: 2rem; margin: 0; }
.catalog-empty p { color: var(--text-muted); }
@media (max-width: 600px) {
  .catalog-controls label { flex: 1 1 100%; min-width: 0; }
  .catalog-entry { grid-template-columns: 80px minmax(0, 1fr); gap: 1rem; }
  .catalog-cover { width: 80px; height: auto; }
  .catalog-entry h2 { font-size: 1.35rem; }
}