.characters-page {
  --app-chrome: #0c0b10;
  background:
    linear-gradient(90deg, transparent 0 8%, rgba(189, 173, 208, 0.035) 8.1%, transparent 8.2%),
    radial-gradient(circle at 78% 8%, rgba(111, 81, 157, 0.18), transparent 29rem),
    #0d0c11;
}

.roster-shell {
  position: relative;
  z-index: 1;
  width: min(1180px, 100%);
  min-height: 100vh;
  min-height: var(--tg-viewport-stable-height, 100dvh);
  margin: 0 auto;
  padding:
    calc(var(--safe-top) + 1.2rem)
    var(--safe-right)
    calc(var(--safe-bottom) + 2rem)
    var(--safe-left);
}

.roster-header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 0 2rem;
  margin-bottom: clamp(2.4rem, 7vw, 4.8rem);
}

.roster-header .back-link {
  grid-column: 1 / -1;
  justify-self: start;
  margin-bottom: clamp(2rem, 6vw, 4.5rem);
}

.roster-header .system-line {
  grid-column: 1 / -1;
}

.roster-header h1 {
  font-size: clamp(3.1rem, 10vw, 6.8rem);
}

.roster-header > p:last-child {
  max-width: 28rem;
  margin: 0 0 0.4rem;
  color: var(--muted);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
  line-height: 1.6;
}

.roster-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.75rem, 2vw, 1.25rem);
}

.profile-card {
  --accent: #9f80cf;
  position: relative;
  min-height: 31rem;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: #17151c;
  text-decoration: none;
  isolation: isolate;
  transition: transform 180ms ease, border-color 180ms ease;
}

.profile-card[data-theme="meimei"] { --accent: #8e61c6; }
.profile-card[data-theme="aiven"] { --accent: #d38e9c; }
.profile-card[data-theme="penitent"] { --accent: #c4a265; }
.profile-card[data-theme="albert"] { --accent: #8e95aa; }
.profile-card[data-theme="norn"] { --accent: #85929d; }

.profile-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, transparent 34%, rgba(8, 8, 11, 0.32) 58%, rgba(8, 8, 11, 0.97) 100%),
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, transparent), transparent 45%);
}

.profile-card::after {
  content: "";
  position: absolute;
  inset: 0.7rem;
  z-index: 3;
  pointer-events: none;
  border: 1px solid transparent;
  transition: border-color 180ms ease;
}

.profile-card:hover,
.profile-card:focus-visible {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--accent) 65%, white 10%);
}

.profile-card:hover::after,
.profile-card:focus-visible::after {
  border-color: color-mix(in srgb, var(--accent) 44%, transparent);
}

.profile-image {
  position: absolute;
  inset: 0;
}

.profile-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: saturate(0.72) contrast(1.04) brightness(0.84);
  transition: transform 400ms ease, filter 300ms ease;
}

.profile-card:hover img,
.profile-card:focus-visible img {
  transform: scale(1.025);
  filter: saturate(0.9) contrast(1.04) brightness(0.94);
}

.profile-card[data-theme="meimei"] .profile-image img {
  object-position: 50% 45%;
}

.profile-card[data-theme="albert"] .profile-image img {
  object-position: 43% top;
}

.profile-number {
  position: absolute;
  z-index: 2;
  top: 1rem;
  right: 1rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(10, 10, 13, 0.46);
  backdrop-filter: blur(6px);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.7rem;
}

.profile-summary {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 3rem 1.4rem 1.5rem;
  display: grid;
  gap: 0.35rem;
}

.profile-tag {
  color: color-mix(in srgb, var(--accent) 72%, white 28%);
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.profile-summary strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.5rem, 4vw, 2.15rem);
  font-weight: 400;
  line-height: 1.02;
}

.profile-summary > span:last-child {
  color: #aaa3b1;
  font-size: 0.82rem;
}

.profile-card.incomplete .profile-image img {
  filter: grayscale(0.5) contrast(0.92) brightness(0.72);
}

.profile-card.incomplete {
  width: 100%;
  padding: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.profile-card.incomplete .profile-image .glitch-slice {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: none;
  will-change: transform, clip-path;
}

.profile-card.incomplete .profile-image .glitch-slice-2 {
  filter: sepia(1) saturate(5) hue-rotate(285deg) contrast(1.2);
  mix-blend-mode: screen;
}

.profile-card.incomplete .profile-image .glitch-slice-3 {
  filter: sepia(1) saturate(5) hue-rotate(140deg) contrast(1.2);
  mix-blend-mode: screen;
}

.profile-card.incomplete.is-critical {
  z-index: 5;
  border-color: #ff3b4f;
  background: #250b10;
  box-shadow:
    0 0 0 1px rgba(255, 37, 58, 0.72),
    0 0 2.5rem rgba(255, 27, 48, 0.42),
    inset 0 0 2.5rem rgba(180, 0, 25, 0.3);
  transform: none;
  transition: none;
}

.profile-card.incomplete.is-critical::before {
  background:
    repeating-linear-gradient(0deg, transparent 0 5px, rgba(255, 30, 48, 0.13) 6px, transparent 7px),
    linear-gradient(180deg, transparent 20%, rgba(60, 0, 9, 0.55), rgba(13, 0, 4, 0.96));
}

.profile-card.incomplete.is-critical .profile-image img {
  filter: grayscale(1) contrast(1.5) brightness(0.58) sepia(0.4) saturate(5) hue-rotate(320deg);
  transition: none;
}

.profile-card.incomplete.is-critical .profile-image > img:not(.glitch-slice) {
  transform: none;
}

.profile-card.incomplete.is-critical .profile-tag,
.profile-card.incomplete.is-critical .profile-summary strong {
  color: #ff5060;
  text-shadow: -2px 0 #fff, 2px 0 #780015;
  animation: none;
}

.roster-footer {
  padding: 2rem 0 0;
  color: #77717e;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-align: right;
  text-transform: uppercase;
}

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

  .roster-header {
    grid-template-columns: 1fr;
  }

  .roster-header > p:last-child {
    margin-top: 1.2rem;
  }
}

@media (max-width: 540px) {
  .profile-number { backdrop-filter: none; }
  .profile-card .profile-image img { filter: none; transition: transform 180ms ease; }
  .profile-card.incomplete .profile-image .glitch-slice { will-change: auto; }
  .roster-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem;
  }

  .profile-card {
    min-height: 19.5rem;
  }

  .profile-summary {
    padding: 2.4rem 0.85rem 1rem;
  }

  .profile-summary strong {
    font-size: 1.22rem;
  }

  .profile-summary > span:last-child {
    font-size: 0.72rem;
  }

  .profile-tag {
    font-size: 0.56rem;
    letter-spacing: 0.1em;
  }

  .profile-number {
    top: 0.65rem;
    right: 0.65rem;
  }
}

@media (max-width: 360px) {
  .roster-grid {
    grid-template-columns: 1fr;
  }

  .profile-card {
    min-height: 25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .profile-card.incomplete .profile-image img,
  .profile-card.incomplete .profile-summary strong {
    animation: none;
  }

  .profile-card.incomplete::after {
    border-color: rgba(210, 64, 79, 0.28);
  }
}