:root {
  /* Brand */
  --brand-bg: var(--comican-background-color);
  --brand-primary: var(--comican-accent);
  --brand-text: var(--comican-white);
  --brand-muted: rgba(255, 255, 255, 0.7);

  /* UI */
  --card-radius: var(--boxed-radius);
  --badge-radius: 999px;
}

.character-archive {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 24px;
}

.character-card {
  background: var(--brand-bg);
  border-radius: var(--card-radius);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: transform 0.25s ease, border-color 0.25s ease;
}

.character-card:hover {
  transform: translateY(-6px);
  border-color: var(--brand-primary);
}


.character-card img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.character-card img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
}

.character-name {
  padding: 14px 16px 6px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--brand-text);
}


.character-stream {
  display: inline-block;
  margin: 0 16px 16px;
  padding: 5px 12px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  border-radius: var(--badge-radius);
}


/*change the colors to match brand global*/
.stream-main {
  background: rgba(14, 175, 255, 0.15);
  color: var(--brand-primary);
}

.stream-fantasy {
  background: rgba(160, 120, 255, 0.18);
  color: #a078ff;
}

.stream-scifi {
  background: rgba(0, 255, 200, 0.18);
  color: #00ffc8;
}

/*Characters single*/

.character-single-header {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 32px;
  align-items: start;
}

.character-single-header img {
  width: 100%;
  border-radius: 16px;
}

.character-single-name {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 10px;
}