.leaderboard{overflow:hidden;background:radial-gradient(ellipse at 50% 45%,#25274288,transparent 75%),#151629;min-height:510px}
.board-heading{position:relative;z-index:1}
.bubble-field{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:center;gap:12px 4px;min-height:410px;padding:20px 0}
.bubble-field>.empty{grid-column:1/-1;text-align:center;padding:25px}
.bubble-slot{display:flex;align-items:center;justify-content:center;min-width:0;min-height:155px}
.player-bubble{position:relative;width:120px;height:120px;flex-shrink:0;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:15px 10px;text-align:center;border:1px solid color-mix(in srgb,var(--bubble-color) 70%,transparent);background:radial-gradient(circle at 28% 20%,#ffffff24,transparent 40%),radial-gradient(circle at 65% 90%,color-mix(in srgb,var(--bubble-color) 35%,transparent),transparent 75%),color-mix(in srgb,var(--bubble-color) 12%,#181a30);box-shadow:inset 0 0 18px color-mix(in srgb,var(--bubble-color) 16%,transparent),0 10px 30px #0003;animation:bubble-drift var(--duration) ease-in-out var(--delay) infinite;animation-direction:var(--direction);will-change:transform}
.player-bubble:before{content:'';position:absolute;width:24px;height:9px;left:24px;top:13px;border-radius:50%;background:#ffffff26;transform:rotate(-35deg)}
.bubble-rank{font:700 11px 'Space Grotesk',sans-serif;color:var(--bubble-color)}
.bubble-name{font-size:12px;font-weight:700;line-height:1.2;max-width:100%;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bubble-score{font:600 11px 'Space Grotesk',sans-serif;color:#e7e8f4}
.bubble-detail{font-size:8px;color:#b8bbcf;line-height:1.2}.bubble-detail:empty{display:none}
.bubble-winner .player-bubble{border:2px solid var(--lime);box-shadow:0 0 28px #cefa6933}
@keyframes bubble-drift{0%,100%{transform:translate(-6px,8px) rotate(-3deg)}25%{transform:translate(7px,-10px) rotate(2deg)}50%{transform:translate(-5px,-15px) rotate(-1deg)}75%{transform:translate(5px,11px) rotate(3deg)}}
@media(min-width:801px){.play-layout{grid-template-columns:minmax(0,1fr) 350px}}
@media(max-width:800px){.bubble-field{grid-template-columns:repeat(auto-fit,minmax(135px,1fr));gap:12px;min-height:340px}.leaderboard{min-height:420px}}
@media(prefers-reduced-motion:reduce){.player-bubble{animation:none;will-change:auto}}