/* A bounded portrait gallery for thirteen ranks and four queen hosts. */
.game-window .character-dialog {
  width: min(1080px, calc(100dvw - var(--window-left) - var(--window-right) - 20px));
  height: min(780px, calc(100dvh - var(--window-top) - var(--window-bottom) - 20px));
  padding: 20px;
  background-image: linear-gradient(#171323bd, #171323e8), url('assets/table-celestial.webp');
}
.game-window .character-dialog[open] { gap: 14px; }
.character-header .modal-title { font-size: 30px; }
.character-collections { display: flex; gap: 8px; flex-shrink: 0; }
.character-collections button { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 18px; border: 1px solid #b492635e; border-radius: 8px; color: #d8c7bd; background: #171421c9; font-size: 12px; }
.character-collections button[aria-pressed='true'] { color: #ffe1a4; border-color: #d8b875; background: #57403c85; box-shadow: inset 0 0 16px #d9ae4620; }
.character-collections button span { font-size: 10px; min-width: 21px; border-radius: 4px; padding: 3px 5px; background: #07071069; color: #f2d397; }
.character-gallery-body { display: grid; grid-template-columns: minmax(270px, .85fr) minmax(340px, 1.15fr); gap: 20px; overflow: hidden; padding: 0; }
.character-stage { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; gap: 12px; margin: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 4px 10px 8px 4px; }
.character-stage[hidden] { display: none; }
.character-hero { width: 168px; max-width: 168px; flex-shrink: 0; margin: 0; }
.character-story { width: 100%; padding: 16px; background: #14111bba; }
.character-rank { margin: 0 0 7px; color: #f0cf92; font-size: 10px; letter-spacing: 1.3px; text-transform: uppercase; }
.character-name { font-size: 30px; margin-bottom: 8px; }
.character-title { color: #bdabbe; font-size: 9px; letter-spacing: 1px; }
.character-description { font-size: 11px; margin-bottom: 10px; line-height: 1.5; }
.character-introduction { font-size: 14px; line-height: 1.55; margin-bottom: 14px; }
.character-audio-status { min-height: 0; }
.character-roster, .has-character .character-roster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: max-content; align-content: start; align-items: start; gap: 10px; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #bd9b68 #211a2b; padding: 4px 6px 8px 2px; }
.character-choice, .has-character .character-choice { position: relative; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; gap: 6px; height: max-content; min-height: 176px; padding: 9px 5px; text-align: center; min-width: 0; background: #14121de6; }
.character-choice-art, .has-character .character-choice-art { width: min(100%, 80px); border-radius: 5px; }
.character-choice-name, .has-character .character-choice-name { font-size: 15px; line-height: 1.15; align-self: auto; }
.character-choice-title, .has-character .character-choice-title { font-size: 8px; line-height: 1.35; text-align: center; align-self: auto; color: #c7b09b; }
.character-choice.selected { border-color: #f9d490; background: #493044d9; box-shadow: inset 0 0 20px #f1c36a18, 0 0 10px #edc27d2b; }
.character-footer { padding-top: 8px; }
.character-voice-controls [hidden] { display: none; }
.character-collections button:focus-visible, .character-choice:focus-visible { outline: 2px solid #ffe0a1; outline-offset: 2px; }
@media (max-width: 700px) {
  .game-window .character-dialog { width: calc(100dvw - var(--window-left) - var(--window-right) - 12px); max-width: calc(100dvw - var(--window-left) - var(--window-right) - 12px); height: calc(100dvh - var(--window-top) - var(--window-bottom) - 12px); max-height: calc(100dvh - var(--window-top) - var(--window-bottom) - 12px); padding: 12px; }
  .game-window .character-dialog[open] { gap: 10px; }
  .character-header .modal-title { font-size: 24px; }
  .character-collections { gap: 6px; }
  .character-collections button { flex: 1; justify-content: center; padding-inline: 7px; gap: 7px; font-size: 11px; }
  .character-gallery-body { display: flex; flex-direction: column; gap: 12px; overflow: auto; }
  .character-stage { display: grid; grid-template-columns: 108px minmax(0, 1fr); align-items: start; gap: 12px; flex-shrink: 0; padding: 2px; overflow: visible; }
  .character-hero { width: 108px; max-width: 108px; }
  .character-story { padding: 11px; }
  .character-name { font-size: 25px; }
  .character-rank { font-size: 8px; line-height: 1.4; letter-spacing: .6px; }
  .character-title { font-size: 8px; letter-spacing: .6px; }
  .character-description { font-size: 10px; }
  .character-introduction { font-size: 12px; line-height: 1.55; }
  .character-voice-controls { gap: 5px; }
  .character-voice-controls button { padding-inline: 8px; font-size: 10px; }
  .character-roster, .has-character .character-roster { grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; flex-shrink: 0; padding: 2px; gap: 8px; }
  .character-choice, .has-character .character-choice { min-height: 166px; padding: 8px 4px; }
  .character-choice-art, .has-character .character-choice-art { width: min(100%, 76px); }
  .character-choice-name, .has-character .character-choice-name { font-size: 14px; }
  .character-choice-title, .has-character .character-choice-title { font-size: 8px; }
}
@media (max-height: 500px) and (min-width: 701px) {
  .game-window .character-dialog { padding: 12px; }
  .game-window .character-dialog[open] { gap: 8px; }
  .character-header .modal-title { font-size: 23px; }
  .character-gallery-body { grid-template-columns: 1fr 1fr; gap: 12px; }
  .character-stage { display: grid; grid-template-columns: 98px minmax(0, 1fr); align-items: start; gap: 10px; padding: 2px; }
  .character-hero { width: 98px; max-width: 98px; }
  .character-story { padding: 10px; }
  .character-name { font-size: 23px; }
  .character-introduction { font-size: 12px; }
  .character-roster, .has-character .character-roster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .character-choice-art, .has-character .character-choice-art { width: 62px; }
  .character-choice, .has-character .character-choice { min-height: 154px; }
  .character-footer { padding-top: 3px; }
}