.character-choices { display: grid; gap: 12px; }
.character-choices__header { display: grid; gap: 5px; padding: 3px 2px; }
.character-choices__header h2 { margin: 0; color: #f3e7c7; font-size: clamp(20px, 3vw, 28px); }
.character-choices__eyebrow { margin: 0; color: #dfb967; font-size: 11px; font-weight: 700; letter-spacing: .14em; }
.character-choices__hint { margin: 0; color: #b7c4b8; font-size: 12px; line-height: 1.45; }
.character-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.character-choice { display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px; padding: 10px; border: 1px solid #58735f; border-radius: 8px; background: linear-gradient(145deg, #18322b, #0c1c19); box-shadow: inset 0 0 0 1px #d7b86b12; }
.character-choice.is-selected { border-color: #e8c36d; box-shadow: inset 0 0 0 1px #f0d1848c, 0 0 17px #e8b94c2b; }
.character-choice.is-locked { align-content: start; opacity: .72; filter: grayscale(.38); }
.character-choice__select { display: grid; grid-template-columns: 112px minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 10px; min-height: 120px; padding: 0; border: 0; border-radius: 5px; color: #e9e5d5; text-align: left; background: transparent; cursor: pointer; }
.character-choice__select:focus-visible, .character-choice__preset:focus-visible { outline: 3px solid #f0cc78; outline-offset: 3px; }
.character-choice__select:disabled { cursor: not-allowed; }
.character-choice__portrait { grid-row: span 3; align-self: center; width: 112px; height: 96px; border: 1px solid #765f3f88; border-radius: 4px; background: radial-gradient(ellipse at 50% 88%, #b0804130, transparent 55%), #10231e; image-rendering: pixelated; }
.character-choice__seal { display: grid; place-items: center; color: #dac499; font-size: 42px; }
.character-choice__title { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #f0e6ca; }
.character-choice__title strong { font-size: 17px; }
.character-choice__title small { flex: none; padding: 2px 6px; border: 1px solid #deb96388; border-radius: 99px; color: #e6c977; font-size: 10px; }
.character-choice__stats { color: #a9d1b6; font-size: 12px; font-variant-numeric: tabular-nums; }
.character-choice__description { display: -webkit-box; overflow: hidden; color: #c5cec1; font-size: 12px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.character-choice__details { margin: 0; border-top: 1px solid #78917b40; }
.character-choice__details > summary { display: flex; align-items: center; min-height: 44px; padding: 5px 2px; cursor: pointer; color: #d6b968; font-size: 12px; font-weight: 700; list-style: none; }
.character-choice__details > summary::-webkit-details-marker { display: none; }
.character-choice__details > summary::after { content: '⌄'; margin-left: auto; color: #e1c67b; font-size: 16px; }
.character-choice__details:not([open]) > summary::after { transform: rotate(-90deg); }
.character-choice__facts { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 5px 8px; margin: 0; padding: 0 0 8px; font-size: 12px; line-height: 1.45; }
.character-choice__facts dt { color: #d6b968; }
.character-choice__facts dd { margin: 0; color: #c6d0c5; }
.character-choice__preset { justify-self: start; min-height: 44px; padding: 6px 10px; border: 1px solid #d8af58; border-radius: 4px; color: #1f281f; font-weight: 700; background: linear-gradient(#f1d386, #ca9f50); cursor: pointer; }
.character-choice__unlock { margin: 0; padding: 7px 8px; border: 1px dashed #a88b5e88; border-radius: 4px; color: #dac499; font-size: 11px; line-height: 1.4; }
.character-growth { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 8px; padding: 8px 0; border-top: 1px solid #78917b40; color: #d6c684; font-size: 12px; font-variant-numeric: tabular-nums; }
.character-growth progress { width: 100%; height: 6px; accent-color: #c8b078; }
.character-growth small { grid-column: 1 / -1; color: #b9c4b6; }

@media (max-width: 620px) {
  .character-options { grid-template-columns: 1fr; }
  .character-choice { gap: 5px; padding: 8px; }
  .character-choice__select { grid-template-columns: 72px minmax(0, 1fr); min-height: 72px; column-gap: 8px; }
  .character-choice__portrait { width: 72px; height: 72px; }
  .character-choice__title strong { font-size: 16px; }
  .character-choice__details > summary { min-height: 44px; }
}
.character-picker { display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 6px 9px; }
.character-picker canvas { width: 54px; height: 54px; image-rendering: pixelated; }
.character-picker b, .character-picker small { display: block; }
.character-picker small { margin-top: 3px; font-size: 11px; color: #c6bea9; }
.character-picker progress { display: block; width: 100%; height: 5px; margin-top: 5px; accent-color: #c8b078; }
.character-dialog { width: min(820px, calc(100vw - 24px)); max-height: 90dvh; overflow: auto; }
#characterUnlockHint { display: block; margin-top: 4px; }