* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', sans-serif; user-select: none; }
body { background: #050507; color: #fff; height: 100vh; overflow: hidden; display: flex; justify-content: center; align-items: center; }
#overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.96); backdrop-filter: blur(20px); z-index: 99999; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: 0.5s; }
#overlay.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
#overlay span { font-size: 1.5rem; font-weight: 600; letter-spacing: 3px; text-shadow: 0 0 18px #a855f7; }
#bg-video { position: fixed; top: 50%; left: 50%; min-width: 100%; min-height: 100%; transform: translate(-50%, -50%); object-fit: cover; z-index: -3; filter: brightness(0.45); }
.bg-overlay { position: fixed; inset: 0; background: radial-gradient(circle, rgba(139,92,246,0.2), rgba(5,5,7,0.9)); z-index: -2; pointer-events: none; }
#snow-canvas { position: fixed; inset: 0; pointer-events: none; z-index: -1; }
#music-control { position: fixed; top: 22px; left: 22px; background: rgba(15,15,22,0.65); border: 1px solid rgba(255,255,255,0.15); color: #fff; padding: 12px 15px; border-radius: 14px; z-index: 100; cursor: pointer; }
.profile-card { background: rgba(14,14,20,0.65); backdrop-filter: blur(22px); border: 1px solid rgba(255,255,255,0.15); border-radius: 26px; padding: 40px 35px; width: 92%; max-width: 450px; text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,0.85); z-index: 10; }
.avatar-wrapper { position: relative; width: 116px; height: 116px; margin: 0 auto 16px; }
.avatar { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,0.3); box-shadow: 0 0 25px rgba(168,85,247,0.75); }
.status-dot { position: absolute; bottom: 6px; right: 6px; width: 18px; height: 18px; background: #22c55e; border: 3px solid #121218; border-radius: 50%; }
.username { font-size: 1.9rem; font-weight: 700; text-shadow: 0 0 15px rgba(255,255,255,0.8); margin-bottom: 8px; }
.badges { display: inline-flex; gap: 12px; background: rgba(255,255,255,0.08); padding: 6px 16px; border-radius: 20px; margin-bottom: 18px; color: #d8b4fe; font-size: 0.9rem; }
.bio-container { font-size: 0.96rem; color: #cbd5e1; min-height: 26px; margin-bottom: 26px; }
.socials { display: flex; justify-content: center; gap: 18px; margin-bottom: 24px; }
.socials a { color: #fff; width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; border-radius: 16px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); transition: 0.25s; text-decoration: none; }
.socials a svg { width: 24px; height: 24px; fill: currentColor; }
.socials a.insta:hover { background: #dc2743; transform: translateY(-4px); }
.socials a.steam:hover { background: #171a21; border-color: #66c0f4; color: #66c0f4; transform: translateY(-4px); }
.socials a.tiktok:hover { background: #000; border-color: #00f2fe; transform: translateY(-4px); }
.footer-stats { display: flex; justify-content: center; gap: 18px; font-size: 0.85rem; color: #94a3b8; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 16px; }
.socials a.kick:hover { background: #53fc18; border-color: #53fc18; color: #000000; transform: translateY(-4px) scale(1.08); box-shadow: 0 6px 20px rgba(83, 252, 24, 0.55); }

body { perspective: 1200px; }
.profile-card {
    transform-style: preserve-3d;
    transition: transform 0.12s cubic-bezier(0.03, 0.98, 0.52, 0.99), box-shadow 0.3s ease;
    will-change: transform;
}
.profile-card:hover {
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.9), 0 0 35px rgba(168, 85, 247, 0.45);
}

body { perspective: 1200px; }
.profile-card {
    transform-style: preserve-3d;
    transition: transform 0.12s cubic-bezier(0.03, 0.98, 0.52, 0.99), box-shadow 0.3s ease;
    will-change: transform;
}
.profile-card:hover {
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.9), 0 0 35px rgba(168, 85, 247, 0.45);
}