body[data-race=a]{--accent:#83eb56;--accent-rgb:131,235,86}
body[data-race=b]{--accent:#ef7c40;--accent-rgb:239,124,64}
body[data-race=c]{--accent:#7c82d1;--accent-rgb:124,130,209}
.race-selector{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;margin-bottom:4px;padding:5px;background:#181c1a;border:1px solid #4c534f}
.race-selector legend{padding:0 4px;color:#cbd1ce;font-size:9px;text-transform:uppercase}
.race-option{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:7px 2px;background:linear-gradient(145deg,#303632,#1b201d);border:1px solid #555d58;color:#eef1ef;text-align:center;cursor:pointer}
.race-option input{position:absolute;opacity:0;pointer-events:none}
.race-option img,.race-emblem{width:16px;height:16px;image-rendering:pixelated}
.race-option img{transform:scale(1.5);margin:4px}
.race-option span{font-size:9px}
.race-option small{display:block;margin-top:2px;color:#909995;font-size:8px}
.race-option:has(input:checked){border-color:var(--accent);box-shadow:inset 0 0 10px rgba(var(--accent-rgb),.25),0 0 4px rgba(var(--accent-rgb),.35)}
.race-emblem{flex:0 0 16px;margin-right:7px;transform:scale(1.6)}
.player-identity{flex:1;min-width:0}
@supports not selector(:has(*)){.race-option:focus-within{border-color:var(--accent)}}
.registration-step[hidden]{display:none}
.civilization-selector{gap:4px;padding:6px;background:linear-gradient(180deg,#141817,#080b0a)}
.civilization-option{min-width:0;justify-content:flex-start;gap:0;padding:0;overflow:hidden;background:#111;border-color:#424a46}
.civilization-card-title{display:flex!important;width:100%;height:45px;align-items:center;justify-content:center;gap:5px;color:#e6ebe8;background:linear-gradient(#303733,#171b19);border-bottom:1px solid #505853;font-size:9px!important;font-weight:700;text-transform:uppercase}
.civilization-card-title img{width:27px!important;height:27px!important;margin:0!important;transform:none!important;object-fit:contain;image-rendering:auto!important}
.civilization-card-title b{font-size:9px;white-space:nowrap}
.civilization-card-art{position:relative;display:block!important;width:100%;aspect-ratio:9/16;overflow:hidden;background:#080a09}
.civilization-card-art:after{position:absolute;inset:0;content:"";pointer-events:none;background:linear-gradient(180deg,transparent 68%,#050706cc);box-shadow:inset 0 0 16px #0008}
.civilization-card-art img{display:block;width:100%!important;height:100%!important;margin:0!important;transform:none!important;object-fit:cover;object-position:center center;image-rendering:auto!important;transition:transform .2s,filter .2s}
.civilization-option:hover .civilization-card-art img{transform:scale(1.025)!important;filter:brightness(1.08)}
.civilization-accretia:hover{border-color:#bd3d32;box-shadow:0 0 8px #bd3d3277,inset 0 0 12px #bd3d3233}
.civilization-bellato:hover{border-color:#dc8b35;box-shadow:0 0 8px #dc8b3577,inset 0 0 12px #dc8b3533}
.civilization-cora:hover{border-color:#ae5bc1;box-shadow:0 0 8px #ae5bc177,inset 0 0 12px #ae5bc133}
.civilization-accretia:has(input:checked){border-color:#bd3d32;box-shadow:0 0 8px #bd3d3277,inset 0 0 12px #bd3d3233}
.civilization-bellato:has(input:checked){border-color:#dc8b35;box-shadow:0 0 8px #dc8b3577,inset 0 0 12px #dc8b3533}
.civilization-cora:has(input:checked){border-color:#ae5bc1;box-shadow:0 0 8px #ae5bc177,inset 0 0 12px #ae5bc133}
.civilization-accretia .civilization-card-title{box-shadow:inset 0 -2px #bd3d32}.civilization-bellato .civilization-card-title{box-shadow:inset 0 -2px #dc8b35}.civilization-cora .civilization-card-title{box-shadow:inset 0 -2px #ae5bc1}
.civilization-descriptions{margin:5px 0}
.civilization-info{--civilization-accent:var(--accent);--civilization-accent-rgb:var(--accent-rgb);padding:7px 8px;color:#b8c0bc;background:linear-gradient(145deg,rgba(var(--civilization-accent-rgb),.12),#151917 52%);border:1px solid var(--civilization-accent);box-shadow:inset 0 0 12px rgba(var(--civilization-accent-rgb),.09),0 0 5px rgba(var(--civilization-accent-rgb),.22);font-size:9px;line-height:1.45}
.civilization-info[data-civilization="0"]{--civilization-accent:#bd3d32;--civilization-accent-rgb:189,61,50}
.civilization-info[data-civilization="1"]{--civilization-accent:#dc8b35;--civilization-accent-rgb:220,139,53}
.civilization-info[data-civilization="2"]{--civilization-accent:#ae5bc1;--civilization-accent-rgb:174,91,193}
.civilization-info[hidden]{display:none}
.civilization-info h2{margin-bottom:5px;color:var(--civilization-accent);font-size:11px;text-align:center;text-shadow:0 0 7px rgba(var(--civilization-accent-rgb),.4);text-transform:uppercase}
.civilization-info h3{margin:7px 0 3px;color:var(--civilization-accent);font-size:9px;text-transform:uppercase}
.civilization-info p+p{margin-top:5px}
.civilization-info details{margin-top:6px;padding-top:5px;border-top:1px solid rgba(var(--civilization-accent-rgb),.48)}
.civilization-info summary{color:var(--civilization-accent);cursor:pointer;text-align:center;text-transform:uppercase}
.civilization-next:disabled,.class-next:disabled{cursor:not-allowed;opacity:.42}
.selected-civilization{margin:0 0 5px;padding:6px;text-align:center;color:var(--accent);background:#111513;border:1px solid rgba(var(--accent-rgb),.55);font-size:10px;text-transform:uppercase}
.registration-controls{display:grid;grid-template-columns:1fr 2fr;gap:4px;margin-top:5px}
.registration-controls .secondary-btn{margin:0}
.class-selector{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin-bottom:6px;padding:5px;background:#111513;border:1px solid #4c534f}
.class-selector legend{padding:0 4px;color:#cbd1ce;font-size:9px;text-transform:uppercase}
.class-option{position:relative;display:block;min-width:0;overflow:hidden;cursor:pointer;border:1px solid #555d58;background:#171b19}
.class-option[hidden]{display:none}
.class-option input{position:absolute;opacity:0;pointer-events:none}
.class-option img{display:block;width:100%;height:auto;aspect-ratio:150/258;object-fit:cover}
.class-option span{display:block;overflow:hidden;padding:3px 2px;color:#e8ecea;font-size:8px;text-align:center;text-overflow:ellipsis;white-space:nowrap}
.class-option small{display:block;margin-top:1px;color:#858f8a;font-size:7px}
.class-option:hover{border-color:var(--accent);box-shadow:0 0 5px rgba(var(--accent-rgb),.65),inset 0 0 0 1px var(--accent)}
.class-option:hover span{color:var(--accent)}
.class-option:has(input:checked){border-color:var(--accent);box-shadow:0 0 5px rgba(var(--accent-rgb),.65),inset 0 0 0 1px var(--accent)}
.class-option:has(input:checked) span{color:var(--accent)}
@supports not selector(:has(*)){.class-option:focus-within{border-color:var(--accent)}}
.class-descriptions{margin:5px 0}
.class-info{padding:8px;color:#bbc3bf;background:linear-gradient(145deg,#202522,#151917);border:1px solid rgba(var(--accent-rgb),.55);font-size:9px;line-height:1.45}
.class-info[hidden]{display:none}
.class-info h2{margin-bottom:5px;color:var(--accent);font-size:11px;text-align:center;text-transform:uppercase}
.class-info p+p{margin-top:5px}
.class-info strong{color:#e7d5a3}
.selected-registration{display:flex;justify-content:center;gap:5px;margin-bottom:5px;font-size:9px;text-align:center;text-transform:uppercase}
.selected-registration span{padding:4px 7px;color:var(--accent);background:#111513;border:1px solid rgba(var(--accent-rgb),.45)}
.selected-class-final:empty{display:none}
.gender-selector{display:grid;grid-template-columns:repeat(2,32px);justify-content:center;gap:8px;margin:0 0 5px;padding:3px 6px 5px;border:0}
.gender-selector[hidden]{display:none}
.gender-selector legend{padding:0 4px;color:#aeb6b2;font-size:8px;text-align:center;text-transform:uppercase}
.gender-option{position:relative;display:grid;place-items:center;width:32px;height:28px;cursor:pointer;border:1px solid transparent;background:transparent}
.gender-option input{position:absolute;opacity:0;pointer-events:none}
.gender-option img{width:16px;height:16px;transform:scale(1.25);image-rendering:auto}
.gender-option:has(input:checked){border-color:var(--accent);background:rgba(var(--accent-rgb),.12);box-shadow:0 0 4px rgba(var(--accent-rgb),.4)}
@supports not selector(:has(*)){.gender-option:focus-within{border-color:var(--accent)}}
body[data-race=a]:has(#registration-form){--accent:#bd3d32;--accent-rgb:189,61,50}
body[data-race=b]:has(#registration-form){--accent:#dc8b35;--accent-rgb:220,139,53}
body[data-race=c]:has(#registration-form){--accent:#ae5bc1;--accent-rgb:174,91,193}
@media(max-width:360px){.civilization-selector{gap:2px;padding:4px}.civilization-card-title{height:39px;gap:2px}.civilization-card-title img{width:23px!important;height:23px!important}.civilization-card-title b{font-size:7px}.class-selector{gap:2px;padding:3px}.class-option span{font-size:7px}}
