/* Reuse the battle selection card rail, effect panel, and confirmation layout. */
#roleSelectionDialog { width: calc(100vw - 16px); max-width: none; height: calc(100dvh - 16px); max-height: none; padding: 0; border: 1px solid #709d98; color: #edf7f5; background: #06191e; }
#roleSelectionDialog::backdrop { background: rgba(0,7,12,.8); }
#roleSelectionDialog .modal { box-sizing: border-box; width: 100%; height: 100%; max-height: none; margin: 0; padding: 12px; display: flex; flex-direction: column; overflow: auto; }
#roleSelectionDialog h2 { margin: 4px 0; font-size: clamp(16px, 2.4vw, 24px); }
#roleSelectionDialog .modal-lead { margin: 3px 0 8px; }
#roleSelectionDialog .battle-select-body { display: grid; grid-template-columns: minmax(0, 62%) minmax(0, 38%); flex: 1; min-height: 0; gap: 12px; }
#roleSelectionDialog .battle-select-cards { display: flex; align-items: center; gap: 16px; overflow-x: auto; overflow-y: hidden; min-width: 0; min-height: 0; padding: 8px; scroll-snap-type: x mandatory; touch-action: pan-x; }
#roleSelectionDialog .card { flex: 0 0 auto; width: auto; height: min(60dvh, 420px); aspect-ratio: 765 / 1072; margin: 0; scroll-snap-align: center; }
#roleSelectionDialog .card-face-image { width: 100%; height: 100%; object-fit: contain; }
#roleSelectionDialog .battle-select-preview { min-height: 0; overflow-y: auto; padding: 10px; font-size: clamp(13px, 1.6vw, 18px); line-height: 1.65; }
#roleSelectionDialog .modal-choice-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; flex: 0 0 auto; margin-top: 8px; }
#roleSelectionDialog .modal-choice-actions button { min-height: 40px; }
@media (max-height: 400px) { #roleSelectionDialog .modal { padding: 8px; } #roleSelectionDialog .eyebrow { display: none; } #roleSelectionDialog .modal-lead { font-size: 11px; } #roleSelectionDialog .card { height: 56dvh; } }