.race-description{display:block;white-space:normal;line-height:1.6;overflow:visible;text-overflow:clip}
.race-abilities{display:flex!important;gap:.35rem!important;flex-wrap:wrap;margin:.25rem 0 1.25rem}
.race-abilities b{font-size:.72rem;font-weight:700;color:#d1fae5;background:#164e3b;padding:.2rem .45rem;border-radius:999px}
.race-name-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(135px,1fr));gap:.6rem;margin:1rem 0}
.race-name-choice{cursor:pointer}
.race-name-choice[hidden]{display:none!important}
.race-name-choice input{position:absolute;opacity:0;pointer-events:none}
.race-name-choice span{display:block;padding:.75rem;text-align:center;font-weight:800;border:1px solid var(--border);border-radius:9px;background:#101720}
.race-name-choice:hover span{border-color:color-mix(in srgb,var(--accent) 65%,var(--border))}
.race-name-choice:has(input:focus-visible) span{outline:2px solid var(--accent);outline-offset:2px}
.race-name-choice:has(input:checked) span{border-color:var(--accent);background:#173025;box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 30%,transparent)}
.race-preview[hidden]{display:none!important}
.race-preview{display:grid;grid-template-columns:minmax(260px,42%) 1fr;overflow:hidden;border:1px solid var(--border);border-radius:14px;background:#101720;margin-top:1rem}
.race-preview .race-portrait{display:block;width:100%;height:100%;min-height:360px;object-fit:cover;object-position:center top;border:0;border-right:1px solid var(--border);background:#080c12}
.race-preview-copy{padding:clamp(1rem,3vw,2rem)}
.race-preview-copy h2{margin-top:0}
.race-preview-copy .race-description{color:var(--muted)}
.race-confirmation{padding:.75rem 1rem;border-radius:8px;color:#d1fae5;background:#064e3b;margin-top:1rem}
.race-is-confirmed .race-name-choice:has(input:checked) span:after{content:' ✓';color:#6ee7b7}
@media(max-width:720px){.race-preview{grid-template-columns:1fr}.race-preview .race-portrait{min-height:0;aspect-ratio:1/1;border-right:0;border-bottom:1px solid var(--border)}}