/* =========================================================
   CHARACTER ROW SHELL
   Roster containers, headings, row theme tokens, and row placeholders.

   Reading guide:
   - Carousel grid sizing, deck polish, scroll hints, and progress bars live in
     css/character-rows.css.
   - Base card structure lives in css/character-cards.css.
   ========================================================= */

body[data-page="secondarycharacters"] #secondary-characters .secondary-character-rosters {
  display: grid;
  gap: clamp(1.2rem, 2.5vw, 1.9rem);
}

body[data-page="secondarycharacters"] #secondary-characters .secondary-character-roster {
  --roster-glow: rgba(122, 186, 232, 0.2);
  --roster-border: rgba(122, 186, 232, 0.32);
  --roster-card-bg: linear-gradient(180deg, rgba(28, 45, 56, 0.9), rgba(7, 11, 15, 0.84));
  --roster-card-border: rgba(122, 186, 232, 0.36);
  position: relative;
  padding: clamp(0.82rem, 1.7vw, 1.1rem);
  border: 1px solid var(--roster-border);
  border-radius: 18px;
  background:
    radial-gradient(circle at 88% 6%, var(--roster-glow), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018));
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.24);
  contain: layout paint style;
  content-visibility: auto;
  contain-intrinsic-size: 520px;
  overflow: hidden;
}

body[data-page="secondarycharacters"] #secondary-characters .secondary-character-roster[hidden] {
  display: none;
}

body[data-page="secondarycharacters"] #secondary-characters .secondary-character-roster.is-carousel-preparing {
  content-visibility: visible;
  min-height: clamp(25rem, 58vw, 37rem);
}

body[data-page="secondarycharacters"] #secondary-characters .secondary-character-roster.is-carousel-preparing > :not(.secondary-character-carousel-loader) {
  visibility: hidden;
  pointer-events: none;
}

body[data-page="secondarycharacters"] #secondary-characters .secondary-character-carousel-loader {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.9rem;
  padding: 2rem;
  background:
    radial-gradient(circle at 50% 38%, var(--roster-glow), transparent 42%),
    linear-gradient(180deg, rgba(16, 19, 20, 0.96), rgba(5, 7, 8, 0.98));
  color: rgba(255, 248, 230, 0.94);
  text-align: center;
}

body[data-page="secondarycharacters"] #secondary-characters .secondary-character-carousel-loader[hidden] {
  display: none;
}

body[data-page="secondarycharacters"] #secondary-characters .secondary-character-carousel-loader-spinner {
  width: 3rem;
  height: 3rem;
  border: 4px solid rgba(255, 255, 255, 0.16);
  border-top-color: rgba(255, 229, 167, 0.95);
  border-radius: 50%;
  box-shadow: 0 0 24px var(--roster-glow);
  animation: secondary-carousel-loader-spin 0.8s linear infinite;
}

body[data-page="secondarycharacters"] #secondary-characters .secondary-character-carousel-loader-label {
  max-width: 24ch;
  font-size: clamp(0.92rem, 2.6vw, 1.08rem);
  font-weight: 800;
  letter-spacing: 0.04em;
}

@keyframes secondary-carousel-loader-spin {
  to {
    transform: rotate(360deg);
  }
}

body[data-page="secondarycharacters"] #secondary-characters .secondary-character-roster-head {
  display: grid;
  justify-items: center;
  gap: 0.28rem;
  margin-bottom: 0.72rem;
  text-align: center;
}

body[data-page="secondarycharacters"] #secondary-characters .secondary-character-roster-title {
  margin: 0;
  font-size: clamp(1.65rem, 4.2vw, 2.65rem);
  line-height: 1.18;
  text-align: center;
  text-wrap: balance;
}

body[data-page="secondarycharacters"] #secondary-characters .secondary-character-roster-copy {
  max-width: 70ch;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(0.88rem, 1.8vw, 0.98rem);
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
}

body[data-page="secondarycharacters"] #secondary-characters .secondary-character-roster--main {
  --roster-glow: rgba(123, 205, 148, 0.22);
  --roster-border: rgba(148, 215, 166, 0.42);
  --roster-card-bg: linear-gradient(180deg, rgba(32, 68, 44, 0.9), rgba(9, 22, 13, 0.86));
  --roster-card-border: rgba(154, 220, 170, 0.46);
}

body[data-page="secondarycharacters"] #secondary-characters .secondary-character-roster--primary {
  --roster-glow: rgba(238, 159, 88, 0.22);
  --roster-border: rgba(238, 174, 109, 0.42);
  --roster-card-bg: linear-gradient(180deg, rgba(84, 48, 22, 0.9), rgba(28, 14, 6, 0.86));
  --roster-card-border: rgba(238, 177, 113, 0.46);
}

body[data-page="secondarycharacters"] #secondary-characters .secondary-character-roster--secondary {
  --roster-glow: rgba(122, 186, 232, 0.22);
  --roster-border: rgba(122, 186, 232, 0.42);
  --roster-card-bg: linear-gradient(180deg, rgba(27, 54, 78, 0.9), rgba(6, 16, 26, 0.86));
  --roster-card-border: rgba(122, 186, 232, 0.46);
}

body[data-page="secondarycharacters"] #secondary-characters .secondary-character-roster--gods {
  --roster-glow: rgba(255, 235, 154, 0.22);
  --roster-border: rgba(255, 231, 164, 0.46);
  --roster-card-bg:
    linear-gradient(180deg, rgba(20, 13, 5, 0.72), rgba(6, 6, 10, 0.88)),
    linear-gradient(135deg, rgba(255, 116, 116, 0.26), rgba(255, 218, 110, 0.22), rgba(122, 222, 166, 0.22), rgba(116, 182, 255, 0.24), rgba(202, 140, 255, 0.22));
  --roster-card-border: rgba(255, 235, 170, 0.55);
}

body[data-page="secondarycharacters"] #secondary-characters .secondary-character-roster--other {
  --roster-glow: rgba(190, 141, 237, 0.24);
  --roster-border: rgba(202, 165, 241, 0.42);
  --roster-card-bg: linear-gradient(180deg, rgba(62, 35, 89, 0.9), rgba(20, 10, 31, 0.86));
  --roster-card-border: rgba(207, 170, 244, 0.48);
}

body[data-page="secondarycharacters"] #secondary-characters .secondary-character-card--coming-soon {
  cursor: default;
}

body[data-page="secondarycharacters"] #secondary-characters .secondary-character-card--coming-soon:hover {
  transform: none;
}

body[data-page="secondarycharacters"] #secondary-characters .secondary-character-card--coming-soon .secondary-character-card-portrait {
  display: grid;
  place-items: center;
  min-height: clamp(13rem, 22vw, 18rem);
  background: rgba(0, 0, 0, 0.24);
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(1.35rem, 4vw, 2.1rem);
  font-weight: 800;
  text-align: center;
}

@media (min-width: 768px) {
  body[data-page="secondarycharacters"] #secondary-characters .secondary-character-rosters {
    gap: clamp(1.45rem, 2.2vw, 2.4rem);
  }

  body[data-page="secondarycharacters"] #secondary-characters .secondary-character-roster {
    padding: clamp(1rem, 1.65vw, 1.65rem);
  }

  body[data-page="secondarycharacters"] #secondary-characters .secondary-character-roster-title {
    font-size: clamp(2.15rem, 3vw, 3.35rem);
  }

  body[data-page="secondarycharacters"] #secondary-characters .secondary-character-roster-copy {
    max-width: 82ch;
    font-size: clamp(0.98rem, 1vw, 1.14rem);
  }
}

@media (max-width: 767px) {
  body[data-page="secondarycharacters"] #secondary-characters .secondary-character-roster {
    padding: 0.68rem 0.52rem;
    border-radius: 14px;
  }

  body[data-page="secondarycharacters"] #secondary-characters .secondary-character-roster-title {
    font-size: clamp(1.55rem, 8vw, 2.25rem);
  }

  body[data-page="secondarycharacters"] #secondary-characters .secondary-character-roster.is-carousel-preparing {
    min-height: 31rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="secondarycharacters"] #secondary-characters .secondary-character-carousel-loader-spinner {
    animation-duration: 1.6s;
  }
}