.sps-profile-container {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
margin-top: -5px; background: #000;
padding: 40px 0;
display: block;
}
.sps-profile-inner {
max-width: 1200px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
gap: 50px;
} .sps-maskot-column {
flex: 0 0 350px;
position: relative;
display: flex;
justify-content: center;
}
.sps-maskot-img {
max-width: 100%;
height: auto;
position: relative;
z-index: 2;
animation: spsLevitate 4s ease-in-out infinite;
}
.sps-green-glow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 250px;
height: 350px;
background: radial-gradient(circle, rgba(83, 252, 24, 0.4) 0%, rgba(0,0,0,0) 70%);
filter: blur(50px);
z-index: 1;
animation: spsPulse 4s ease-in-out infinite;
} .sps-content-column {
flex: 1;
max-width: 800px;
}
.sps-switcher {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
.sps-btn {
background: #1a1a1a;
color: #fff;
border: 1px solid #333;
padding: 10px 25px;
border-radius: 5px;
cursor: pointer;
font-weight: bold;
font-size: 14px;
transition: 0.3s;
} .btn-twitch.active { background: #9146ff !important; border-color: #9146ff; }
.btn-kick.active { background: #53fc18 !important; border-color: #53fc18; color: #000; }
.sps-player-area {
border: 1px solid #222;
background: #000;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 0 30px rgba(0,0,0,0.5);
}
.sps-pane { display: none; }
.sps-pane.active { display: block; } @keyframes spsLevitate {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-15px); }
}
@keyframes spsPulse {
0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
50% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.1); }
} @media (max-width: 900px) {
.sps-profile-inner { flex-direction: column; padding: 0 20px; }
.sps-maskot-column { flex: 0 0 auto; }
}