/* Standalone collection cards. Load after legacy roster/portrait rules. */
.customer-rank-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.75rem), 1fr));
  gap: 14px;
  align-items: start;
}
.customer-rank-card {
  --rank-accent: #d9c2de;
  min-width: 0;
  overflow: hidden;
  color: #f6edf5;
  background: linear-gradient(155deg, #322739, #211c2a 65%);
  border: 1px solid #79617e;
  border-radius: 17px;
  box-shadow: 0 4px 14px #0c071a30, inset 0 0 0 3px #ffffff04;
  font-size: 1rem;
  line-height: 1.6;
  container-type: inline-size;
}
.customer-rank-card[data-rank="S"] { --rank-accent: #f3d28e; border-color: #be9960; }
.customer-rank-card[data-rank="A"] { --rank-accent: #ff9fa9; border-color: #a63c4a; }
.customer-rank-card[data-rank="E"] { --rank-accent: #d6b3ff; border-color: #77529d; }
.customer-rank-card__portrait {
  position: relative;
  height: 185px;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid #725c71;
  background: radial-gradient(ellipse at 50% 45%, #8e7c8a 0, #544555 48%, #352c40 100%);
}
.customer-rank-card__portrait::before {
  content: "";
  position: absolute;
  inset: 10px 10px -10px;
  z-index: -1;
  border: 1px solid #ead1dc4d;
  border-radius: 42% 42% 0 0;
}
.customer-rank-card__portrait .cast-portrait {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: none;
}
/* The supplied 512×768 notebook portraits share normalized head landmarks.
   Crop the lower body only; never stretch, shrink-to-fit, or filter the face. */
.customer-rank-card__portrait .cast-portrait img {
  display: block;
  width: min(100%, 310px);
  height: auto;
  max-height: none;
  margin: 0 auto;
  object-fit: contain;
  object-position: center top;
}
.customer-rank-card__portrait-line {
  position: absolute;
  inset: auto 0 0;
  height: 22px;
  background: linear-gradient(transparent, #211c2a70);
  pointer-events: none;
}
.customer-rank-card__portrait-fallback {
  display: grid;
  place-items: center;
  height: 100%;
  color: #ddd0e0;
  font-size: .875rem;
}
.customer-rank-card__body { padding: 13px; }
.customer-rank-card__heading { display: block; min-width: 0; margin: 0 0 11px; }
.customer-rank-card__heading h3 {
  margin: 2px 0 3px;
  color: #fff2e1;
  font-family: var(--serif, "Noto Serif JP", serif);
  font-size: 1.125rem;
  line-height: 1.5;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.customer-rank-card__city, .customer-rank-card__status {
  display: block;
  font-size: .875rem;
  line-height: 1.55;
  color: #d6c5dc;
  overflow-wrap: anywhere;
}
.customer-rank-card__city { color: #dfc797; }
.customer-rank-badge {
  --badge-color: #ddc9e3;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  gap: 8px;
  color: var(--badge-color);
  line-height: 1.35;
  vertical-align: middle;
}
.customer-rank-badge > strong {
  display: grid;
  place-items: center;
  min-width: 37px;
  height: 39px;
  padding: 0 5px;
  border: 1px solid currentColor;
  border-radius: 8px 8px 12px 12px;
  background: #0e091b40;
  font-family: Georgia, serif;
  font-size: 1.7rem;
  font-weight: 500;
}
.customer-rank-badge > span { font-size: .875rem; overflow-wrap: anywhere; }
.customer-rank-badge--s { --badge-color: #f3d28e; }
.customer-rank-badge--a { --badge-color: #ff9fa9; }
.customer-rank-badge--b { --badge-color: #99e8a9; }
.customer-rank-badge--c { --badge-color: #9fd1ff; }
.customer-rank-badge--d { --badge-color: #ced0d5; }
.customer-rank-badge--e { --badge-color: #d6b3ff; }
.customer-rank-card__reason {
  margin: 10px 0 13px;
  color: #efe2f0;
  font-size: 1rem;
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.customer-rank-card__facts {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 11px 0 0;
  padding-top: 11px;
  border-top: 1px solid #d5badb26;
  font-variant-numeric: tabular-nums;
}
.customer-rank-card__facts > div { min-width: 0; }
.customer-rank-card__facts dt { color: #d5c1db; font-size: .875rem; }
.customer-rank-card__facts dd { margin: 1px 0 0; color: #f6e5bf; font-size: 1rem; overflow-wrap: anywhere; }
.customer-rank-card__facts dd > span { margin-left: 4px; color: #e0cee5; font-size: .875rem; }
.customer-rank-card__reservation { margin: 9px 0 0; color: #d7c5df; font-size: .875rem; overflow-wrap: anywhere; }
.customer-rank-card__details { margin-top: 12px; border-top: 1px solid #d5badb26; }
.customer-rank-card__details > summary {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  min-height: 44px;
  padding: 8px 0;
  color: #f0d9f2;
  font-size: .875rem;
  cursor: pointer;
  list-style: none;
}
.customer-rank-card__details > summary::-webkit-details-marker { display: none; }
.customer-rank-card__details[open] > summary > span { transform: rotate(45deg); }
.customer-rank-card__details > div { padding-bottom: 12px; }
.customer-rank-card__details p { margin: 0 0 10px; font-size: 1rem; overflow-wrap: anywhere; }
.customer-rank-card__details p:last-child { margin-bottom: 0; }
.customer-rank-card__details p > span { display: block; margin-bottom: 4px; color: #d2b8da; font-size: .875rem; }
.customer-rank-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 10px 0 0;
  padding: 9px 0 0;
  border-top: 1px solid #d5badb26;
}
.customer-rank-card__actions button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  max-width: 100%;
  padding: 8px 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: .875rem;
  line-height: 1.5;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.customer-rank-card__record { color: #ebdbf1; }
.customer-rank-card__ng { margin-left: auto; color: #f3bbc8; }
.customer-rank-card__actions button:focus-visible,
.customer-rank-card__details > summary:focus-visible {
  outline: 2px solid #f1d39c;
  outline-offset: 3px;
  border-radius: 4px;
}
.customer-rank-card--ended { border-style: dashed; }
.customer-rank-card--ended .customer-rank-card__status { color: #f1c3d5; }
.customer-rank-card--compact .customer-rank-card__body { padding: 11px; }
.customer-rank-card--compact .customer-rank-card__portrait { height: 155px; }
.customer-rank-card--compact .customer-rank-card__facts { margin-top: 9px; padding-top: 8px; }
@container (max-width: 220px) {
  .customer-rank-card__portrait { height: 155px; }
  .customer-rank-card__body { padding: 11px; }
  .customer-rank-card__actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
  .customer-rank-card__actions button { justify-content: space-between; width: 100%; margin-left: 0; }
}
@media (forced-colors: active) {
  .customer-rank-card, .customer-rank-badge > strong { border-color: CanvasText; }
  .customer-rank-card__actions button, .customer-rank-card__details > summary { color: LinkText; }
}

/* Notebook rows keep portraits/ranks scannable, ending cards retain their layout. */
.customer-rank-card--notebook .customer-rank-card__portrait .cast-portrait img{position:absolute;top:0;left:50%;width:145px;max-width:none;height:auto;margin:0;transform:translateX(-50%)}
.customer-roster-list{grid-template-columns:minmax(0,1fr);gap:12px}.customer-rank-card--notebook{display:grid;grid-template-columns:86px minmax(0,1fr);border-radius:14px;line-height:1.5}.customer-rank-card--notebook .customer-rank-card__portrait{height:auto;min-height:143px;grid-row:1;align-self:stretch;border-bottom:0;border-right:1px solid #725c7155}.customer-rank-card--notebook .customer-rank-card__body{padding:10px;min-width:0}.customer-rank-card--notebook .customer-rank-card__heading{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:5px;margin:0 0 4px}.customer-rank-card--notebook .customer-rank-card__heading h3{font-size:1.05rem;margin:0}.customer-rank-card--notebook .customer-rank-badge{gap:5px}.customer-rank-card--notebook .customer-rank-badge>strong{width:27px;height:29px;font-size:1.1rem;border-radius:6px}.customer-rank-card--notebook .customer-rank-badge>span{font-size:.875rem}.customer-rank-card--notebook .customer-rank-card__identity{display:flex;flex-wrap:wrap;gap:2px 8px;font-size:.875rem;color:#d6bfd8}.customer-rank-card--notebook .customer-rank-card__status{font-size:.875rem}.customer-rank-card--notebook .customer-rank-card__facts{gap:8px;margin:9px 0 0;padding:7px 0 0}.customer-rank-card--notebook .customer-rank-card__facts dd{font-size:1rem}.customer-rank-card--notebook .customer-rank-card__reservation{margin:6px 0 0;font-size:.875rem;color:#f3d7a6}.customer-rank-card--notebook .customer-rank-card__details{grid-column:1/-1;margin:0;padding:0 12px;border-top:1px solid #d5badb26}.customer-rank-card--notebook .customer-rank-card__details>summary{min-height:44px;padding:10px 0;font-size:.875rem}.customer-rank-card--notebook .customer-rank-card__actions{display:flex;flex-wrap:wrap;gap:6px}.customer-rank-card--notebook .customer-rank-card__actions button{width:auto}.customer-rank-card--notebook .customer-rank-card__ng{margin-left:auto}

/* Favorite selection stays separate from rank, card inspection and NG. */
.customer-favorite,.customer-rank-card__restore{display:flex;align-items:center;justify-content:center;gap:5px;width:100%;min-height:44px;margin:7px 0;padding:7px 5px;border:1px solid #8f7d92;border-radius:9px;background:#29232f;color:#eee5f0;font:inherit;font-size:.875rem;line-height:1.4;cursor:pointer}
.customer-favorite>span{font-size:1.25rem;line-height:1}.customer-favorite[aria-pressed="true"]{border-color:#d7ba83;background:#433523;color:#fff0c6}.customer-rank-card__restore{border-color:#aecbd0;color:#e1f5f7;background:#293840}
.customer-favorite:focus-visible,.customer-rank-card__restore:focus-visible{outline:2px solid #f1d39c;outline-offset:3px}

.customer-rank-badge--z{--badge-color:#e0e6f3}