/* Карта способности (режим «Способности») — макет в стиле приложения.
   Цвет категории приходит через --c. Размеры — от ширины карты (container queries), поэтому
   одна и та же карта работает и в сетке колоды (3 в ряд на телефоне), и крупно на главной. */
.abc{
  --cut:10px;
  position:relative;container-type:inline-size;display:flex;flex-direction:column;gap:0;min-width:0;
  background:var(--c);color:#fff;
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
  /* % от ширины ячейки сетки = от ширины карты (cqi тут нельзя — карта не может мерить саму себя) */
  padding:7% 7% 8%;isolation:isolate;
}
.abc::before{
  content:"";position:absolute;inset:1.5px;z-index:-1;
  background:#0c0d12;
  background:radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--c) 16%, transparent), transparent 70%), color-mix(in srgb, var(--c) 6%, #0a0b10);
  clip-path:polygon(calc(var(--cut) - 1px) 0,100% 0,100% calc(100% - var(--cut) + 1px),calc(100% - var(--cut) + 1px) 100%,0 100%,0 calc(var(--cut) - 1px));
}
.abc-top{display:flex;justify-content:space-between;align-items:center;gap:4px;
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:clamp(7px,6.2cqi,11px);letter-spacing:.18em;color:var(--c);text-transform:uppercase;line-height:1;margin-bottom:5cqi;white-space:nowrap;overflow:hidden}
.abc-lvl{display:inline-flex;gap:2px;flex:none}
.abc-lvl i{display:block;width:clamp(4px,3.6cqi,7px);height:clamp(4px,3.6cqi,7px);background:var(--c);box-shadow:0 0 6px var(--c)}
.abc-art{position:relative;aspect-ratio:1/.86;display:grid;place-items:center;
  border:1px solid color-mix(in srgb, var(--c) 45%, transparent);
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--c) 22%, transparent), transparent 62%),
    repeating-linear-gradient(-45deg, color-mix(in srgb, var(--c) 14%, transparent) 0 1px, transparent 1px 9px),
    #07080c;
  margin-bottom:7cqi}
.abc-ico{width:40%;height:40%;color:var(--c);filter:drop-shadow(0 0 5px var(--c))}
.abc-name{font-family:"Grtsk Tera",system-ui,sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(9px,8.4cqi,17px);line-height:1.08;letter-spacing:.01em;margin-bottom:4cqi;
  overflow-wrap:anywhere;hyphens:manual}
.abc-phase{display:flex;align-items:center;gap:3px;font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:clamp(7px,6.4cqi,11px);letter-spacing:.1em;color:#8cc4ff;text-transform:uppercase;line-height:1;margin-bottom:5cqi}
.abc-phase.day{color:#ffd23f}
.abc-phase.both{color:#cfd2d6}
.abc-ph-ico{width:clamp(9px,7.5cqi,13px);height:clamp(9px,7.5cqi,13px);color:#8cc4ff;flex:none}
.abc-ph-ico.day{color:#ffd23f}
.abc-tags{display:flex;flex-wrap:wrap;gap:3cqi}
.abc-tag{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:clamp(6.5px,5.6cqi,10px);letter-spacing:.12em;text-transform:uppercase;line-height:1;
  padding:.45em .6em;border:1px solid color-mix(in srgb, var(--c) 70%, transparent);background:color-mix(in srgb, var(--c) 14%, transparent);color:var(--c);white-space:nowrap}
.abc-tag.vote{color:#ff8a4c;border-color:rgba(255,138,76,.75);background:rgba(255,138,76,.12)}
.abc-desc{margin:6cqi 0 0;padding-top:5cqi;border-top:1px dashed color-mix(in srgb, var(--c) 40%, transparent);
  font-size:clamp(11px,7.2cqi,14px);line-height:1.4;color:#dfe2e6}