/* Idle portraits from the existing 4-column, 3-row character atlas. */
#welcome{overflow-y:auto;align-items:safe center}
.characters button{display:flex;flex-direction:column;align-items:center;text-align:center;padding:12px 16px;overflow:hidden}
.character-photo{display:block;flex-shrink:0;width:86px;height:86px;margin-bottom:8px;background-image:url('/assets/characters.png');background-size:400% 300%;background-repeat:no-repeat;filter:drop-shadow(0 4px 7px #0005);transition:transform .18s ease}
.photo-sonic{background-position:0 0}
.photo-knuckles{background-position:0 50%}
.photo-shadow{background-position:0 100%}
.characters button:hover .character-photo,.characters button:focus-visible .character-photo{transform:translateY(-3px) scale(1.05)}
.characters button.selected{box-shadow:0 0 18px #52c6ff30}
@media(max-width:650px){.characters button{padding:10px 8px}.character-photo{width:72px;height:72px}.characters small{font-size:8px}}
@media(max-height:500px){.character-photo{width:54px;height:54px;margin-bottom:4px}.characters button{padding:7px 12px}}
@media(prefers-reduced-motion:reduce){.character-photo{transition:none}.characters button:hover .character-photo,.characters button:focus-visible .character-photo{transform:none}}