.content-hero {
  margin-bottom: 28px;
}

.content-hero h1 {
  margin: 7px 0 12px;
  font-size: clamp(34px, 6vw, 58px);
  letter-spacing: -.05em;
}

.content-hero p,
.content-copy {
  max-width: 760px;
  color: #aebbb4;
  font: 15px/1.65 system-ui, sans-serif;
}

.content-hub-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.content-hub-card,
.attack-sprite-card {
  border: 1px solid #2f3b36;
  border-radius: 12px;
  background: #121819;
}

.content-hub-card {
  display: grid;
  min-height: 210px;
  align-content: end;
  padding: 22px;
  color: #edf2e8;
  text-decoration: none;
}

.content-hub-card:hover,
.content-hub-card:focus-visible {
  border-color: #9fce61;
  background: #17231b;
}

.content-hub-card strong {
  color: #9fce61;
  font-size: 21px;
}

.content-hub-card span {
  margin-top: 8px;
  color: #aebbb4;
  font: 14px/1.5 system-ui, sans-serif;
}

.attack-catalogue-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
  justify-content: space-between;
  margin: 24px 0;
  padding: 15px;
  border: 1px solid #2f3b36;
  border-radius: 10px;
  background: #121819;
}

.attack-catalogue-tools form {
  display: flex;
  flex: 1 1 360px;
  gap: 8px;
}

.attack-catalogue-tools input {
  min-width: 0;
  flex: 1;
  padding: 10px 12px;
  border: 1px solid #3a4741;
  border-radius: 6px;
  background: #0d1213;
  color: #f4f7f0;
  font: 14px ui-monospace, monospace;
}

.attack-catalogue-tools button,
.attack-pagination a {
  border: 1px solid #9fce61;
  border-radius: 6px;
  background: #9fce61;
  color: #12210d;
  padding: 10px 13px;
  font: 800 13px ui-monospace, monospace;
  text-decoration: none;
  cursor: pointer;
}

.attack-result-count {
  margin: 0;
  color: #91a097;
  font: 12px ui-monospace, monospace;
}

.attack-sprite-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 13px;
}

.attack-sprite-card {
  min-width: 0;
  padding: 12px;
  text-align: center;
}

.attack-sprite-preview {
  display: block;
  width: 96px;
  height: 96px;
  max-width: 100%;
  margin: 0 auto 10px;
  object-fit: contain;
  image-rendering: pixelated;
  border: 1px solid #34413b;
  border-radius: 7px;
  background: repeating-conic-gradient(#1b2420 0 25%, #101614 0 50%) 50% / 14px 14px;
}

.attack-sprite-card h2 {
  overflow: hidden;
  margin: 7px 0 5px;
  color: #edf2e8;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attack-sprite-card p {
  margin: 3px 0;
  color: #91a097;
  font: 11px/1.4 ui-monospace, monospace;
}

.attack-sprite-card--default {
  margin-bottom: 18px;
  border-color: #d5aa2b;
}

.attack-tag {
  display: inline-block;
  border-radius: 4px;
  background: #9fce61;
  color: #12210d;
  padding: 3px 6px;
  font: 800 10px ui-monospace, monospace;
}

.attack-tag--default {
  background: #e4b636;
}

.attack-pagination {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  margin-top: 24px;
}

.attack-pagination span {
  color: #aebbb4;
  font: 12px ui-monospace, monospace;
}

.content-empty {
  padding: 20px;
  border: 1px solid #3a4641;
  border-radius: 8px;
  background: #121819;
  color: #aebbb4;
}

@media (max-width: 980px) {
  .attack-sprite-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .content-hub-grid { grid-template-columns: 1fr; }
  .content-hub-card { min-height: 150px; }
  .attack-sprite-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .attack-sprite-preview { width: 80px; height: 80px; }
}

@media (max-width: 420px) {
  .attack-sprite-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}