/* Раздел котов: фильтры, сетка карточек (стиль карточек — из home.css), окно кота. */

.cats-page { padding: calc(var(--header-h) + 48px) 0 80px; min-height: 100vh; }
.cats-page h1 { font-size: clamp(36px, 5.5vw, 60px); color: var(--paper-2); text-shadow: 0 3px 0 rgba(0, 0, 0, .35); }
.cats-page .head p { color: #e9dcc2; }

.filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 auto 34px; }
.filters .sep { width: 1px; background: rgba(242, 179, 61, .25); margin: 4px 6px; }
.chip { --c: var(--gold); border: 0; cursor: pointer; padding: 9px 16px; border-radius: 999px; font: 700 15px var(--body);
  color: var(--text); background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 55%, transparent);
  transition: background .2s, color .2s, transform .15s; }
.chip:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--c) 18%, transparent); }
.chip.on { background: color-mix(in srgb, var(--c) 72%, #000); color: #fff; color: var(--ink); box-shadow: 0 4px 14px color-mix(in srgb, var(--c) 40%, transparent); }
.chip.r-rare { --c: var(--green); } .chip.r-epic { --c: var(--purple); } .chip.r-legendary { --c: var(--gold); } .chip.r-mythic { --c: var(--myth); }
.chip.on:is([data-f="all"], [data-f="story"], [data-f="wheel"], .r-legendary) { background: var(--c); color: var(--ink); }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 22px; perspective: 1000px; }
.grid .card { cursor: pointer; display: block; animation: cardIn .5s both; }
.none { text-align: center; color: var(--muted); font-weight: 600; margin: 30px 0 0; }
.grid .card[hidden] { display: none; }
@keyframes cardIn { from { opacity: 0; transform: translateY(20px) scale(.97); } }

/* окно кота */
.cat-dialog { width: min(860px, calc(100% - 24px)); max-height: calc(100% - 24px); padding: 0; border: 0; border-radius: 28px;
  color: var(--ink); background: var(--paper-2); box-shadow: 0 30px 80px rgba(0, 0, 0, .7);
  display: none; grid-template-columns: 1fr 1.15fr; overflow: auto; }
.cat-dialog[open] { display: grid; animation: dlgIn .35s cubic-bezier(.2, 1.2, .4, 1); }
.cat-dialog::backdrop { background: rgba(10, 5, 2, .72); backdrop-filter: blur(4px); }
@keyframes dlgIn { from { opacity: 0; transform: translateY(24px) scale(.96); } }
.cat-dialog .close { position: absolute; top: 12px; right: 14px; z-index: 2; width: 42px; height: 42px; border: 0; border-radius: 50%;
  font: 700 28px/1 var(--body); cursor: pointer; color: var(--paper-2); background: rgba(26, 14, 7, .75); }
.dlg-art { --r: var(--green); position: relative; min-height: 320px; display: grid; place-items: end center;
  background: radial-gradient(70% 70% at 50% 60%, color-mix(in srgb, var(--r) 55%, #fff), color-mix(in srgb, var(--r) 70%, #000)); }
.dlg-art img { width: 92%; filter: drop-shadow(0 16px 16px rgba(0, 0, 0, .4)); }
.dlg-body { position: relative; padding: 30px 30px 26px; }
.dlg-body h2 { font-size: 40px; color: var(--wood-dark); margin: 10px 0 2px; }
.dlg-body .rar { display: inline-block; font: 700 12px/1 var(--body); text-transform: uppercase; letter-spacing: .08em; padding: 6px 10px;
  border-radius: 999px; color: #fff; background: color-mix(in srgb, var(--r, var(--green)) 72%, #000); }
.dlg-body .rar[data-rarity="legendary"] { background: var(--gold); color: var(--ink); }
.dlg-body .src { display: inline-block; margin-top: 6px; font: 700 12px/1.3 var(--body); padding: 6px 10px; border-radius: 999px; background: rgba(26, 14, 7, .1); color: var(--wood-dark); }
.dlg-body .meta { margin: 0; color: #7a6650; font-size: 15px; }
.dlg-body .role { margin: 12px 0 16px; font-size: 17px; color: var(--ink); }
.ab { display: flex; gap: 14px; align-items: flex-start; padding: 12px 14px; margin-top: 10px; border-radius: 16px;
  background: rgba(138, 90, 54, .1); box-shadow: inset 0 0 0 1px rgba(138, 90, 54, .2); }
.ab img { width: 44px; height: 44px; flex: none; }
.ab b { display: block; font-family: var(--head); font-size: 18px; color: var(--wood-dark); }
.ab span { font-size: 15px; color: #4a3826; }
.ab.skill { box-shadow: inset 4px 0 0 var(--teal), inset 0 0 0 1px rgba(138, 90, 54, .2); }
.ab.ult { box-shadow: inset 4px 0 0 var(--gold), inset 0 0 0 1px rgba(138, 90, 54, .2); }
.ab.skill b::before { content: "Навык · "; color: var(--teal); }
.ab.ult b::before { content: "Ульта · "; color: #c4861a; }
@media (max-width: 720px) {
  .cat-dialog { grid-template-columns: 1fr; }
  .dlg-art { min-height: 0; height: min(62vw, 260px); overflow: hidden; }
  .dlg-art img { width: auto; height: min(56vw, 240px); max-width: 92%; object-fit: contain; }
  .dlg-body h2 { font-size: 32px; }
}