.ninja-genre-groups { display:grid; gap:16px; margin:22px 0 30px; }
.ninja-genre-group { min-width:0; padding:22px; border:1px solid var(--ninja-border); border-radius:20px; background:var(--ninja-glass); }
.ninja-genre-group__header { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.ninja-genre-group__header h2 { min-width:0; margin:0; color:var(--ninja-ink); font-size:18px; font-weight:700; line-height:1.4; letter-spacing:-.3px; }
.ninja-genre-group__count { display:inline-grid; place-items:center; flex:0 0 auto; min-width:28px; min-height:28px; padding:3px 7px; border:1px solid var(--ninja-border); border-radius:9px; background:var(--ninja-panel); color:var(--ninja-muted); font-size:10px; font-weight:700; }
.ninja-genre-group .ninja-catalog-links { display:flex; flex-wrap:wrap; gap:8px; margin:0; }
.ninja-genre-group .ninja-catalog-links a { display:inline-flex; align-items:center; min-height:40px; max-width:100%; box-sizing:border-box; padding:9px 13px; border:1px solid var(--ninja-border); border-radius:11px; background:var(--ninja-panel); color:var(--ninja-ink); font-size:12px; line-height:1.5; overflow-wrap:anywhere; transition:background-color .15s ease,border-color .15s ease; }
.ninja-genre-group .ninja-catalog-links a:hover { border-color:#d2bb7b88; background:#d2bb7b22; }
.ninja-genre-group .ninja-catalog-links a:focus-visible { outline:2px solid #c4a765; outline-offset:3px; }
@media(max-width:600px) {
  .ninja-genre-groups { gap:13px; margin:20px 0 25px; }
  .ninja-genre-group { padding:17px 15px; border-radius:17px; }
  .ninja-genre-group__header { align-items:flex-start; gap:10px; margin-bottom:13px; }
  .ninja-genre-group__header h2 { flex:1 1 0; font-size:16px; }
  .ninja-genre-group .ninja-catalog-links { gap:7px; }
  .ninja-genre-group .ninja-catalog-links a { min-height:44px; padding:10px 11px; font-size:11px; }
}
@media(prefers-reduced-motion:reduce) { .ninja-genre-group .ninja-catalog-links a { transition:none; } }