.profile { width: min(1000px, calc(100% - 32px)); margin: 32px auto 40px; }
.profile__name { margin: 0 0 18px; font-size: 22px; line-height: 30px; color: #e1e5eb; text-align: center; }
.skin-viewer { width: min(620px, 100%); margin-inline: auto; text-align: center; }
.skin-viewer__stage { position: relative; width: 100%; height: 560px; border: 1px solid #27292b; border-radius: 8px; background: radial-gradient(ellipse at center, #242b2780, #111414a0); overflow: hidden; }
.skin-viewer__canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.skin-viewer__canvas:active { cursor: grabbing; }
.skin-viewer__canvas:focus-visible { outline: 2px solid #aaf; outline-offset: -4px; }
.skin-viewer__status { position: absolute; inset: 45% 20px auto; color: #8e949e; line-height: 20px; pointer-events: none; }
.skin-viewer__hint { margin: 14px 0; color: #8e949e; font-size: 12px; line-height: 18px; }
.profile__players { display: inline-block; margin-top: 4px; }
[hidden] { display: none !important; }
@media (max-width:1024px) { .skin-viewer__stage { height: 520px; } }
@media (max-width:768px) { .profile { margin-top: 24px; } .skin-viewer__stage { height: 450px; } }

.profile__login { display: block; margin: 18px auto 12px; padding: 12px 24px; border: 1px solid #27292b; border-radius: 6px; background: #111414; color: #aaf; font: inherit; opacity: 1; cursor: default; }