.character-selection {
  position: absolute;
  inset: 0;
  z-index: 200;
  overflow-y: auto;
  padding: clamp(16px, 3vw, 40px);
  background: #080b0d;
  color: #eee2c2;
  font-family: Georgia, "Times New Roman", serif;
}
.character-card { max-width: 920px; margin: 0 auto; }
.character-eyebrow { color: #b8d9df; letter-spacing: .14em; font-size: .85rem; }
.character-card h1 { font-size: clamp(1.7rem, 3vw, 2.6rem); margin: .5em 0; }
.character-card p { line-height: 1.5; }
.character-card fieldset { margin: 24px 0 16px; padding: 16px; border: 1px solid #8f9b9c; }
.character-card legend { padding: 0 8px; }
.character-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.character-option {
  position: relative; display: flex; flex-direction: column; align-items: center;
  gap: 10px; padding: 14px 8px; min-height: 135px; text-align: center;
  background: #162126; border: 2px solid #687b81; border-radius: 6px; cursor: pointer;
}
.character-option:has(input:checked) { border-color: #ddcda5; background: #27373c; }
.character-option:has(input:focus-visible) { outline: 3px solid #b8d9df; outline-offset: 3px; }
.character-option input { position: absolute; top: 10px; left: 10px; accent-color: #ddcda5; width: 18px; height: 18px; }
.character-silhouette { display: block; width: 48px; height: 66px; position: relative; }
.character-silhouette::before { content: ""; position: absolute; top: 0; left: 14px; width: 20px; height: 20px; border-radius: 50%; background: #b8d9df; }
.character-silhouette::after { content: ""; position: absolute; top: 25px; left: 5px; width: 38px; height: 40px; border-radius: 18px 18px 5px 5px; background: #b8d9df; }
#character-art-note { color: #b8d9df; }
.character-confirmation { min-height: 1.5em; font-weight: bold; }
.character-continue { font: inherit; color: #080b0d; background: #ddcda5; border: 2px solid #ddcda5; border-radius: 4px; padding: 12px 32px; min-height: 48px; cursor: pointer; }
.character-continue:focus-visible { outline: 3px solid #b8d9df; outline-offset: 4px; }
.character-continue:disabled { opacity: .6; cursor: wait; }
@media (max-width: 700px) { .character-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (forced-colors: active) { .character-option:has(input:checked) { border-color: Highlight; } }