:root { --glass-surface: #11141bcc; --glass-rim: #ffffff24; --glass-light: #b5cdff18; }
[data-theme="light"] { --glass-surface: #ffffffcc; --glass-rim: #1355ff40; --glass-light: #1355ff12; }
.liquid-glass { position: relative; isolation: isolate; background: linear-gradient(135deg, #ffffff07, transparent 48%), var(--glass-surface); border: 1px solid var(--glass-rim); box-shadow: inset 0 1px 0 #ffffff12, inset 0 -1px 0 #ffffff05, 0 18px 50px #0002; }
[data-theme="light"] .liquid-glass { box-shadow: inset 0 1px 0 #ffffff80, 0 18px 50px #1355ff12; }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .liquid-glass { backdrop-filter: blur(18px) saturate(125%); -webkit-backdrop-filter: blur(18px) saturate(125%); } }
.liquid-glass::before { content: ''; position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: radial-gradient(ellipse at var(--glass-x, 50%) var(--glass-y, 20%), var(--glass-light), transparent 65%); pointer-events: none; }
.profile-stars { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.profile-stars > i { position: absolute; width: var(--star-size, 9px); height: var(--star-size, 9px); color: var(--accent); background: currentColor; clip-path: polygon(50% 0, 59% 41%, 100% 50%, 59% 59%, 50% 100%, 41% 59%, 0 50%, 41% 41%); opacity: .35; animation: profile-star-float 8s ease-in-out infinite alternate; animation-play-state: paused; transition: opacity var(--motion-ui); }
.profile-stars > i:nth-child(1) { left: 88%; top: 14%; --star-size: 12px; }
.profile-stars > i:nth-child(2) { left: 65%; top: 84%; animation-delay: -3s; --star-size: 7px; }
.profile-stars > i:nth-child(3) { left: 8%; top: 72%; animation-delay: -5s; --star-size: 5px; }
.liquid-glass:hover > .profile-stars > i, .liquid-glass:focus-within > .profile-stars > i { opacity: .85; animation-play-state: running; }
.roster-detail > .profile-stars > i { animation-play-state: running; }
@keyframes profile-star-float { from { transform: translate3d(0, 0, 0) rotate(-8deg); } to { transform: translate3d(4px, -7px, 0) rotate(10deg); } }
.pointer-depth { transform: perspective(1800px) rotateX(calc(var(--depth-y, 0) * -.35deg)) rotateY(calc(var(--depth-x, 0) * .5deg)) translate3d(calc(var(--depth-x, 0) * 3px), calc(var(--depth-y, 0) * 2px), 0); }
@media (prefers-reduced-motion: reduce) { .profile-stars > i { animation: none; } .pointer-depth { transform: none; } }
@media (max-width: 720px) {
  .liquid-glass { backdrop-filter: blur(8px) saturate(110%); -webkit-backdrop-filter: blur(8px) saturate(110%); }
  .profile-stars > i { animation: none; }
}