/* All four actions share the same responsive party-button renderer. */
.social{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:min(1120px,calc(100% - 48px));max-width:none;gap:16px}
.social a,.social .steam{min-width:0;min-height:80px;padding:16px 14px;font-size:clamp(17px,1.7vw,25px);gap:10px;white-space:nowrap}
.social .steam{font-size:clamp(14px,1.4vw,21px)}
.social svg{width:28px;height:28px;flex-shrink:0}
@media(min-width:1100px){.social{width:min(1120px,calc(100% - 400px))}}
@media(max-width:600px){
 .social{grid-template-columns:repeat(2,minmax(0,1fr));width:calc(100% - 24px);max-width:420px;gap:8px;bottom:calc(40px + env(safe-area-inset-bottom))}
 .social a,.social .steam{min-height:54px;padding:12px 10px;font-size:17px;gap:7px}
 .social svg{width:22px;height:22px}
 .reel-dock{bottom:calc(168px + env(safe-area-inset-bottom))}
}
@media(min-width:601px) and (max-height:550px){
 .social{width:calc(100% - 40px);max-width:960px;gap:8px;bottom:40px}
 .social a,.social .steam{min-height:54px;font-size:16px;padding:12px 8px;gap:6px}
 .social .steam{font-size:13px}.social svg{width:22px;height:22px}
 .reel-dock{top:14px;transform:none;max-height:calc(100dvh - 140px)}
 .reel-track{max-height:calc(100dvh - 170px)}
}
/* A quick playful wiggle, then a pause; transform never shifts the button row. */
.social .demo-launch{transform-origin:center;animation:demo-wiggle 3.2s ease-in-out infinite}
@keyframes demo-wiggle{0%,7%,29%,100%{transform:rotate(0)}11%,19%{transform:rotate(-3deg)}15%,23%{transform:rotate(3deg)}26%{transform:rotate(-1deg)}}
@media(prefers-reduced-motion:reduce){.social .demo-launch{animation:none}}

/* Separate the centered play action from the bottom-right social stack. */
main .social{display:contents}
main .social a{position:absolute;right:max(20px,env(safe-area-inset-right));left:auto;width:220px;min-height:62px;height:62px;padding:12px 18px;font-size:21px;margin:0}
main .social .instagram{bottom:calc(208px + env(safe-area-inset-bottom))}
main .social .discord{bottom:calc(134px + env(safe-area-inset-bottom))}
main .social .steam{bottom:calc(60px + env(safe-area-inset-bottom));font-size:17px}
main .social .demo-launch{left:calc(50% - 150px);right:auto;bottom:calc(60px + env(safe-area-inset-bottom));width:300px;height:84px;font-size:27px}
@media(max-width:600px){
 main .social a{right:12px;width:150px;height:50px;min-height:50px;padding:10px;font-size:16px;gap:6px}
 main .social .instagram{bottom:calc(230px + env(safe-area-inset-bottom))}
 main .social .discord{bottom:calc(172px + env(safe-area-inset-bottom))}
 main .social .steam{bottom:calc(114px + env(safe-area-inset-bottom));font-size:15px}
 main .social .demo-launch{left:calc(50% - 110px);width:220px;height:58px;bottom:calc(40px + env(safe-area-inset-bottom));font-size:22px}
 main .reel-dock{left:12px;right:auto;top:auto;bottom:calc(114px + env(safe-area-inset-bottom));transform:none;width:calc(100% - 186px);max-width:none;max-height:174px}
 main .reel-track{max-height:150px}
}
@media(min-width:601px) and (max-height:550px){
 main .social a{right:16px;width:180px;height:48px;min-height:48px;font-size:17px}
 main .social .instagram{bottom:154px}main .social .discord{bottom:98px}main .social .steam{bottom:42px;font-size:14px}
 main .social .demo-launch{left:calc(50% - 110px);width:220px;height:60px;bottom:42px;font-size:22px}
}

main .social .steam{position:absolute}

main .social .steam{min-height:0}