/* ============================================================
   D'LYR — Catalogue
   ============================================================ */
.cat__bar{ display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; margin-bottom:22px; }
.cat__filters{ display:flex; flex-wrap:wrap; gap:10px; }
.cat__chip{ font-family:var(--f-btn); font-weight:700; font-size:17px; color:var(--paper); padding:9px 20px; border-radius:var(--r-pill); border:2px solid rgba(194,208,179,.2); transition:.2s; }
.cat__chip:hover{ border-color:var(--lime); }
.cat__chip.on{ background:var(--lime); color:var(--ink); border-color:var(--lime); }
.cat__tools{ display:flex; gap:14px; flex-wrap:wrap; }
.cat__select{ display:flex; align-items:center; gap:10px; font-family:var(--f-btn); font-weight:700; font-size:15px; color:rgba(194,208,179,.7); }
.cat__select select{ font-family:var(--f-btn); font-weight:700; font-size:16px; color:var(--paper); background:rgba(194,208,179,.06); border:2px solid rgba(194,208,179,.18); border-radius:12px; padding:9px 14px; cursor:pointer; }
.cat__select select option{ color:#111; }
.cat__count{ font-family:var(--f-body); font-size:15px; color:rgba(194,208,179,.5); margin-bottom:26px; }

.cat__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.xcard{ position:relative; border-radius:var(--r-sm); overflow:hidden; aspect-ratio:3/4; display:block; background:#0e1a13; border:1px solid rgba(194,208,179,.12); transition:transform .3s, box-shadow .3s, border-color .3s; }
.xcard:hover{ transform:translateY(-6px); border-color:var(--lime); box-shadow:0 20px 44px rgba(0,0,0,.5); }
.xcard .ph{ position:absolute; inset:0; border-radius:0; background:transparent; display:flex; align-items:center; justify-content:center; transition:transform .6s cubic-bezier(.2,.8,.2,1); }
.xcard .ph__img{ width:100%; height:100%; object-fit:contain; border-radius:0; }
.xcard .ph__img[src*="Snow"]{ object-fit:cover; object-position:center 15%; }
.xcard:hover .ph{ transform:scale(1.03); }
.xcard__scrim{ display:none; }
.xcard__header{ position:absolute; top:0; left:0; right:0; padding:16px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; z-index:4; pointer-events:none; }
.xcard__tags{ width:100%; display:flex; flex-wrap:nowrap; justify-content:flex-start; align-items:center; gap:6px; margin-bottom:4px; }
.xcard__tag{ font-family:var(--f-btn); font-weight:800; font-size:12px; line-height:1; letter-spacing:.01em; padding:5px 10px; border-radius:var(--r-pill); color:#ffffff; white-space:nowrap; flex:none; box-shadow:0 3px 10px rgba(0,0,0,.4); }
.tag-genre{ border:1px solid rgba(255,255,255,.4); text-shadow:0 1px 2px rgba(0,0,0,.8); }
.tag-type{ background:#1c3024 !important; color:#d4bc72 !important; border:1.5px solid #d4bc72; text-shadow:none; }
.xcard__name{ font-family:var(--f-display); font-weight:800; font-size:clamp(20px,1.6vw,26px); line-height:1.05; color:#ffffff; text-shadow:0 2px 8px rgba(0,0,0,.95), 0 0 12px rgba(0,0,0,.95); margin:0; text-align:center; }
.xcard__meta{ display:flex; justify-content:center; gap:14px; font-family:var(--f-btn); font-weight:700; font-size:13px; color:#ffffff; text-shadow:0 2px 6px rgba(0,0,0,.95), 0 0 8px rgba(0,0,0,.95); }
.xcard__meta span{ display:flex; align-items:center; gap:5px; }
.xcard__meta svg{ width:14px; height:14px; }
.cat__empty{ text-align:center; color:rgba(194,208,179,.6); font-size:18px; padding:60px 0; }

.catmq{ color:var(--ink); }

@media (max-width:1100px){ .cat__grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:900px){ .cat__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){
  .cat__grid{ grid-template-columns:1fr; }
  .cat__bar{ flex-direction:column; align-items:flex-start; }
}