/* Credits tab. These are the people who paid for the game to exist, so the names
   are the design: big enough to read at a glance, in columns that fill the width
   rather than a single long scroll. Palette matches the rest of the shell. */

.cr-body { display: flex; flex-direction: column; gap: 26px; }

.cr-sec-head {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding-bottom: 7px;
  margin-bottom: 11px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.cr-sec-title { font-size: 16px; font-weight: 700; color: #eaf0ff; }
.cr-sec-count {
  font-size: 11px;
  color: #9fb0cc;
  background: rgba(127, 227, 255, .12);
  border: 1px solid rgba(127, 227, 255, .3);
  border-radius: 999px;
  padding: 1px 8px;
}
.cr-sec-note { margin: -6px 0 12px; font-size: 12.5px; color: #8b95ab; }

/* --- Made by --- */
.cr-people { display: flex; flex-wrap: wrap; gap: 14px; }
.cr-person {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 11px;
  padding: 13px 17px;
  min-width: 210px;
}
.cr-person-name { font-size: 16px; font-weight: 700; color: #ffd66b; }
.cr-person-role { font-size: 12.5px; color: #9aa4bb; margin-top: 3px; }

/* --- Backer names. Columns, so 300 people don't become 300 scrolled rows. --- */
.cr-names {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 4 168px;
  column-gap: 22px;
}
.cr-name {
  font-size: 13.5px;
  color: #ccd6ea;
  padding: 3px 0;
  break-inside: avoid;
  /* A long display name must not silently overlap the next column. */
  overflow-wrap: anywhere;
}

.cr-person-name a,
.cr-name a { color: inherit; text-decoration: none; border-bottom: 1px dotted rgba(255, 255, 255, .3); }
.cr-person-name a:hover,
.cr-name a:hover { color: #7fe3ff; border-bottom-color: #7fe3ff; }

.cr-thanks {
  margin-top: 26px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: 13.5px;
  color: #9aa4bb;
  font-style: italic;
}

@media (max-width: 560px) {
  .cr-names { columns: 2 120px; }
  .cr-person { min-width: 0; flex: 1 1 100%; }
}
