/* ═══ CATÁLOGO ═══ */
[hidden] { display:none !important; }
.cat-body { padding-top:0; }
.cat-main { padding-top:96px; }
.cat-hero { padding:clamp(40px,8vh,90px) clamp(20px,6vw,90px) 30px; max-width:1500px; margin:0 auto; }
.cat-title { font-family:var(--anton); font-size:clamp(46px,9vw,120px); line-height:.92; letter-spacing:.01em; }
.cat-title em { color:var(--red); }
.cat-sub { color:var(--grey); max-width:56ch; margin-top:18px; font-size:16px; }
.cat-sub b { color:#3fd6e8; }
.cat-filters { display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; }
.cat-filters button {
  font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:var(--grey);
  background:none; border:1px solid var(--line); padding:10px 14px; transition:.2s;
}
.cat-filters button:hover { color:var(--white); }
.cat-filters button.on { color:#050505; background:var(--fc,#fff); border-color:var(--fc,#fff); font-weight:700; }

.cat-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:20px; padding:20px clamp(20px,6vw,90px) 90px; max-width:1500px; margin:0 auto;
}
.cat-item {
  --rc:#888; position:relative; background:var(--bg-2); border:1px solid var(--line);
  border-top:4px solid var(--rc); text-align:left; padding:0; overflow:hidden;
  display:flex; flex-direction:column; cursor:pointer;
  transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, border-color .3s;
}
.cat-item:hover { transform:translateY(-8px); box-shadow:0 22px 50px rgba(0,0,0,.65), 0 0 40px color-mix(in srgb,var(--rc) 26%,transparent); }
.ci-img { aspect-ratio:3/4; background:#08080a; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.ci-img img { width:100%; height:100%; object-fit:contain; transition:transform .4s; }
.cat-item:hover .ci-img img { transform:scale(1.06); }
.ci-info { padding:14px 16px 18px; display:flex; flex-direction:column; gap:5px; }
.ci-name { font-family:var(--anton); font-size:19px; letter-spacing:.04em; }
.ci-zh { font-family:var(--mono); font-size:10px; letter-spacing:.24em; color:var(--grey); }
.ci-row { display:flex; align-items:center; justify-content:space-between; margin-top:6px; gap:8px; }
.ci-rar { font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:.16em; color:var(--rc); }
.ci-chance { font-family:var(--mono); font-size:9px; color:var(--grey); }
.ci-ultra::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, transparent 40%, color-mix(in srgb,var(--rc) 22%,transparent) 50%, transparent 60%);
  background-size:250% 250%; animation:shine 3.5s linear infinite;
}
@keyframes shine { to { background-position:-180% 0 } }

/* modal do catálogo */
.cat-modal { position:fixed; inset:0; z-index:200; background:rgba(3,3,3,.92); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center; padding:16px; overflow-y:auto; }
.cat-card {
  --rc:#888; position:relative; width:min(920px,100%); max-height:92vh; overflow-y:auto;
  background:var(--bg-2); border:1px solid var(--line); border-top:4px solid var(--rc);
  padding:clamp(22px,3.6vw,44px); box-shadow:0 0 70px color-mix(in srgb,var(--rc) 20%,transparent);
  animation:ccIn .35s cubic-bezier(.2,1.4,.3,1);
}
@keyframes ccIn { from { transform:scale(.9); opacity:0 } }
.cc-grid { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(20px,3.4vw,40px); align-items:start; }
.cc-img { background:#08080a; border:1px solid var(--line); padding:10px; }
.cc-img img { width:100%; display:block; }
.cc-num { font-family:var(--mono); font-size:10px; letter-spacing:.24em; color:var(--grey); }
.cc-name { font-family:var(--anton); font-size:clamp(30px,4.6vw,50px); line-height:1; margin:6px 0 2px; }
.cc-zh { font-family:var(--mono); font-size:12px; letter-spacing:.3em; color:var(--grey); margin-bottom:12px; }
.cc-rar { font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.2em; color:var(--rc);
  border:1px solid currentColor; padding:6px 11px; display:inline-block; }
.cc-lore { color:var(--grey); font-size:15px; margin:16px 0; }
.cc-stats { display:flex; flex-direction:column; gap:9px; margin-bottom:16px; }
.cs-row { display:grid; grid-template-columns:66px 1fr; align-items:center; gap:12px;
  font-family:var(--mono); font-size:9px; letter-spacing:.22em; color:var(--grey); }
.cs-row i { display:block; height:8px; background:var(--line); overflow:hidden; }
.cs-row b { display:block; height:100%; width:0%; background:var(--rc); box-shadow:0 0 10px var(--rc); }
.cc-skill { font-family:var(--mono); font-size:10px; letter-spacing:.16em; color:var(--grey); margin-bottom:12px; }
.cc-skill b { color:var(--rc); font-size:12px; }
.cc-traits { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:14px; }
.cc-traits i { font-style:normal; font-family:var(--mono); font-size:8.5px; letter-spacing:.16em; border:1px solid var(--line); padding:6px 9px; }
.cc-game { font-family:var(--mono); font-size:10px; letter-spacing:.16em; color:var(--rc); margin-bottom:6px; }
.cc-chance { font-family:var(--mono); font-size:10px; letter-spacing:.16em; color:var(--grey); margin-bottom:20px; }

@media (max-width:760px) {
  .cat-main { padding-top:76px; }
  .cat-grid { grid-template-columns:repeat(2,1fr); gap:12px; padding:16px 14px 70px; }
  .ci-name { font-size:15px; }
  .cc-grid { grid-template-columns:1fr; }
  .cc-img img { max-height:34vh; width:auto; margin:0 auto; }
}