.modal.roster-modal {
  width: min(1180px, 96vw);
  border-color: rgba(226, 181, 95, .55);
  background:
    linear-gradient(180deg, rgba(36, 24, 13, .98), rgba(15, 11, 7, .99));
}

.roster-modal .modal-body {
  padding: 0 22px 10px;
  background:
    radial-gradient(circle at 50% 0%, rgba(201, 151, 70, .1), transparent 44%),
    linear-gradient(180deg, rgba(10, 8, 5, .2), rgba(10, 8, 5, .55));
}

.roster-head {
  position: sticky;
  top: 0;
  z-index: 3;
  padding: 12px 0 10px;
  background: linear-gradient(180deg, #20160d 0%, rgba(32, 22, 13, .96) 78%, transparent);
}

.roster-head > p {
  margin: 0 0 10px;
  font-size: 11px;
  letter-spacing: 1px;
  color: #b5a281;
}

.roster-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.roster-tab {
  min-width: 74px;
  padding: 7px 12px;
  border: 1px solid rgba(200, 160, 88, .28);
  background: rgba(18, 13, 8, .7);
  color: #c9b48f;
  font-family: var(--font-body, "Noto Serif SC", serif);
  font-size: 12px;
  letter-spacing: 2px;
  cursor: pointer;
  transition: .18s;
}

.roster-tab span {
  margin-left: 7px;
  font-size: 10px;
  color: #8d7859;
}

.roster-tab:hover,
.roster-tab.active {
  border-color: rgba(236, 192, 105, .8);
  color: #f4dfaf;
  background: linear-gradient(180deg, rgba(126, 77, 30, .65), rgba(66, 40, 18, .65));
  box-shadow: inset 0 0 18px rgba(220, 164, 76, .15);
}

.roster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(316px, 1fr));
  gap: 10px;
  max-height: min(64vh, 680px);
  overflow: auto;
  padding: 4px 4px 14px;
  scrollbar-width: thin;
  scrollbar-color: #7b5b31 #17100a;
}

.roster-card {
  display: grid;
  grid-template-columns: 72px 1fr;
  min-height: 110px;
  border: 1px solid rgba(196, 151, 80, .24);
  background:
    linear-gradient(115deg, color-mix(in srgb, var(--kc) 14%, rgba(20, 15, 9, .92)), rgba(17, 12, 7, .94));
  box-shadow: inset 0 0 0 1px rgba(255, 231, 180, .035);
}

.roster-art {
  position: relative;
  display: grid;
  place-items: center;
  border-right: 1px solid rgba(196, 151, 80, .2);
  background:
    radial-gradient(circle at 50% 36%, color-mix(in srgb, var(--kc) 52%, transparent), transparent 72%),
    linear-gradient(180deg, rgba(255, 255, 255, .04), transparent);
}

.roster-art span {
  font-family: var(--font-display, "STKaiti", serif);
  font-size: 32px;
  color: #f1dfb6;
  text-shadow: 0 0 18px color-mix(in srgb, var(--kc) 60%, transparent);
}

.roster-art em {
  position: absolute;
  bottom: 6px;
  font-size: 9px;
  font-style: normal;
  letter-spacing: 2px;
  color: #c9ad7c;
}

.roster-body {
  min-width: 0;
  padding: 8px 10px 8px;
}

.roster-line {
  display: flex;
  align-items: baseline;
  gap: 7px;
  white-space: nowrap;
  overflow: hidden;
}

.roster-line strong {
  font-family: var(--font-display, "STKaiti", serif);
  font-size: 17px;
  color: #f2dfb4;
  letter-spacing: 1px;
}

.roster-line i {
  font-size: 9.5px;
  font-style: normal;
  color: #a68e68;
  overflow: hidden;
  text-overflow: ellipsis;
}

.roster-line b {
  margin-left: auto;
  padding: 1px 5px;
  font-size: 9px;
  font-weight: 500;
  color: #ddb979;
  border: 1px solid rgba(200, 160, 88, .3);
}

.roster-meta {
  margin: 3px 0 5px;
  font-size: 9px;
  letter-spacing: 2px;
  color: #a88458;
}

.roster-skills {
  display: grid;
  gap: 3px;
}

.roster-skill {
  font-size: 9.5px;
  line-height: 1.45;
  color: #9d8f76;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.roster-skill b {
  margin-right: 4px;
  color: #d7b985;
  font-weight: 600;
}

.catalog-head {
  position: sticky;
  top: 0;
  z-index: 3;
  padding: 12px 0 10px;
  background: linear-gradient(180deg, #20160d 0%, rgba(32, 22, 13, .97) 82%, transparent);
}

.catalog-head > p {
  margin: 0 0 10px;
  font-size: 11px;
  letter-spacing: 1px;
  color: #b5a281;
}

.catalog-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

.catalog-tools input,
.catalog-tools select {
  height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(200, 160, 88, .32);
  background: rgba(13, 9, 6, .9);
  color: #e7d5b4;
  font-family: var(--font-body, "Noto Serif SC", serif);
  font-size: 11px;
  outline: none;
}

.catalog-tools input {
  flex: 1;
  min-width: 100px;
}

.catalog-tools input:focus,
.catalog-tools select:focus {
  border-color: rgba(236, 192, 105, .75);
}

.catalog-tools #catalog-count {
  font-size: 10px;
  letter-spacing: 1px;
  color: #a98d62;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .modal.roster-modal {
    width: 100vw;
    max-height: 92vh;
  }
  .roster-grid {
    grid-template-columns: 1fr;
    max-height: 58vh;
  }
  .roster-modal .modal-body {
    padding: 0 10px 8px;
  }
  .catalog-tools {
    flex-wrap: wrap;
  }
  .catalog-tools input {
    flex-basis: 100%;
  }
}