/* Opening-screen additions only. Existing menu rows, title artwork and PLAY stay in place. */
.home-leaderboard-controls{position:relative;width:53%;height:100%;min-height:0;min-width:0}
#start-screen .home-leaderboard-controls #top-thumbs{width:100%;height:100%}
#home-add-nickname[hidden]{display:none!important}
#home-add-nickname{position:absolute;top:calc(100% + 4px);left:0;width:100%;min-height:28px;padding:3px 7px;border:1px solid #899b64;border-radius:7px;background:#172019;color:#ffe638;font:400 14px/1.1 'HOHER Tutorial',system-ui,sans-serif;box-shadow:none;touch-action:manipulation;white-space:nowrap}
#home-add-nickname:active{transform:translateY(1px)}
/* Animate the six authored SVG strokes once: start at .2s, full at .4s, gone at .7s. */
#play-intro .intro-emphasis path{opacity:0;transform-box:fill-box;transform-origin:center}
#play-intro.active .intro-emphasis path:nth-child(-n+3){animation:hoher-emphasis-left .5s .2s ease-out both}
#play-intro.active .intro-emphasis path:nth-child(n+4){animation:hoher-emphasis-right .5s .2s ease-out both}
@keyframes hoher-emphasis-left{0%{opacity:0;transform:translateX(5px) scale(.25)}40%,65%{opacity:1;transform:translateX(-5px) scale(1)}100%{opacity:0;transform:translateX(5px) scale(.25)}}
@keyframes hoher-emphasis-right{0%{opacity:0;transform:translateX(-5px) scale(.25)}40%,65%{opacity:1;transform:translateX(5px) scale(1)}100%{opacity:0;transform:translateX(-5px) scale(.25)}}
@media(prefers-reduced-motion:reduce){#play-intro.active .intro-emphasis path:nth-child(n){animation:none;opacity:0}}