/* Game TOP: current leaders float in a shared galaxy; game rules stay in the existing leaderboards. */
.game-top { margin: 0 0 2.75rem; --top-motion: paused; }
.game-top[data-active="true"] { --top-motion: running; }
.game-top .dash-section-head { gap: 0.85rem; margin-bottom: 1rem; }
.game-top-space { touch-action: manipulation; position: relative; isolation: isolate; overflow: hidden; border-radius: 16px; background: #061125; border: 1px solid #263e62; box-shadow: 0 12px 30px #14274a1a; }
.game-top-galaxy, .game-top-stars { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.game-top-galaxy { object-fit: cover; object-position: center; z-index: -2; }
.game-top-stars { z-index: -1; }
.game-top-star { position: absolute; width: var(--star-size); height: var(--star-size); color: #e0efff; fill: currentColor; filter: drop-shadow(0 0 4px #87baff); animation: game-top-twinkle var(--star-duration) ease-in-out var(--star-delay) infinite; animation-play-state: var(--top-motion); }
.game-top-players { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: start; gap: 1rem; min-height: 200px; margin: 0; padding: 0 3.2% 16px; }
.game-top-player { --top-accent: #acc5f8; --top-tag: #293554; --top-lift: 16px; --top-duration: 7s; --top-delay: -1s; min-width: 0; padding-top: var(--top-lift); }
.game-top-player--avalon { --top-accent: #90caff; --top-tag: #1f4770; --top-lift: 68px; --top-duration: 8.2s; --top-delay: -3.2s; }
.game-top-player--uno { --top-accent: #f5bfc5; --top-tag: #74384d; --top-lift: 27px; --top-duration: 7.6s; --top-delay: -5.1s; }
.game-top-player--cabo { --top-accent: #8eded3; --top-tag: #225653; --top-lift: 51px; --top-duration: 8.8s; --top-delay: -2.5s; }
.game-top-collectible { display: grid; grid-template-columns: 74px minmax(0, 1fr); align-items: center; column-gap: 10px; min-width: 0; }
.game-top-avatar-visual { display: block; width: 100%; height: 100%; animation: game-top-float var(--top-duration) ease-in-out var(--top-delay) infinite; animation-play-state: var(--top-motion); }
.game-top-portrait { justify-self: center; position: relative; width: 56px; height: 56px; }
.game-top-avatar-link { display: block; width: 100%; height: 100%; border-radius: 50%; }
.game-top .game-top-avatar { display: block; width: 56px; height: 56px; border-radius: 50%; background: #1b2b46; border: 1px solid #99c0e4; box-shadow: 0 0 16px #699ed866; }
.game-top-avatar .lp-avatar-fallback { color: #edf4ff; font-size: 1.5rem; }
.game-top-avatar img { width: 100%; height: 100%; object-fit: cover; }
.game-top-result { min-width: 0; color: #edf3ff; text-shadow: 0 1px 4px #030a17; }
.game-top-game { display: inline-flex; align-items: center; max-width: 100%; min-height: 44px; min-width: 44px; color: #fff; font-size: 0.73rem; font-weight: 600; line-height: 1.4; text-decoration: none; text-shadow: none; }
.game-top-game-label { display: flex; align-items: center; gap: 4px; padding: 3px 6px 3px 3px; border-radius: 6px; background: var(--top-tag); border: 1px solid #c6dcff30; }
.game-top-game-logo { flex: 0 0 18px; width: 18px; height: 18px; border-radius: 4px; object-fit: cover; }
.game-top-game:hover { color: #fff; }
.game-top-game:hover .game-top-game-label { border-color: var(--top-accent); }

.game-top-name { display: block; width: fit-content; min-width: 44px; max-width: 100%; color: #fff; font-size: 0.98rem; font-weight: 650; min-height: 44px; line-height: 44px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-decoration: none; }
.game-top-name:hover { color: var(--top-accent); }
.game-top-score { display: block; color: #d8e6f6; font-size: 0.78rem; line-height: 1.5; font-variant-numeric: tabular-nums; }
.game-top-score strong { font-weight: 550; }
.game-top-status { display: block; color: #b6c9df; font-size: 0.78rem; line-height: 1.5; }
.game-top-retry { display: block; min-height: 44px; background: none; border: none; padding: 0; color: #bddbff; font: inherit; font-size: 0.8rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.game-top :is(a, button):focus-visible { outline: 2px solid #8dc4ff; outline-offset: 4px; }
.game-top-note { margin-top: 8px; font-size: 0.8rem; color: var(--text-light); }
@keyframes game-top-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes game-top-twinkle { 0%, 100% { opacity: 0.12; transform: scale(0.6); } 48% { opacity: 0.88; transform: scale(1.15); } }

.game-top-copy { min-width: 0; }
.game-top-avatar-scale { display: block; width: 100%; height: 100%; position: relative; transition: transform 180ms ease, filter 180ms ease; }
.game-top-avatar-frame { position: absolute; inset: -12px; width: calc(100% + 24px); height: calc(100% + 24px); pointer-events: none; }
.game-top-avatar-link:is(:hover, :focus-visible, [aria-expanded="true"]) .game-top-avatar-scale { transform: scale(1.2); filter: drop-shadow(0 0 7px #9bcaff88); }
.game-top-player--gobang { --top-accent: #d0c5ff; --top-tag: #493e69; --top-lift: 10px; --top-duration: 8.4s; --top-delay: -4s; }
.game-top-game-label > span { min-width: 0; }
.game-top-player:not([data-state="ready"]) .game-top-portrait { display: none; }
.game-top-player:not([data-state="ready"]) .game-top-copy { grid-column: 1 / -1; }

.community-user-hover-card--game-top { width: 320px; padding: 28px 20px 18px; border-color: #759aca88; background: #101d34; color: #edf4ff; box-shadow: 0 20px 60px #07102255, 0 0 18px #7dace529; animation: game-top-card-open 160ms ease-out; }
.community-user-hover-card--game-top .community-user-hover-card-head { gap: 18px; margin: 0 0 18px; padding-right: 22px; }
.community-user-hover-card--game-top .community-user-hover-card-avatar { position: relative; width: 64px; height: 64px; overflow: visible; background: #1c3454; font-size: 24px; }
.community-user-hover-card--game-top .community-user-hover-card-name { color: #f2f6ff; font-size: 1.1rem; overflow-wrap: anywhere; }
.community-user-hover-card--game-top .community-user-hover-card-id { display: none; }
.community-user-hover-card--game-top :is(.community-user-hover-card-close, .community-user-hover-card-bio, .community-user-hover-card-recent-label, .community-user-hover-card-loading) { color: #c2d4ee; }
.community-user-hover-card--game-top .community-user-hover-card-context { padding: 10px 0; border-block: 1px solid #8caedd33; color: #dceaff; }
.community-user-hover-card--game-top .community-user-hover-card-recent-value { background: #294464; color: #d4eaff; }
.community-user-hover-card--game-top .community-user-hover-card-btn.secondary { background: #21324d; border-color: #728eaf66; color: #e8f1ff; }
.community-user-hover-card--game-top .community-user-hover-card-btn.primary { background: #c9e4ff; color: #132842; border-color: #e3f2ff; }
@keyframes game-top-card-open { from { opacity: 0; transform: translateY(5px) scale(.97); } to { opacity: 1; transform: none; } }
@media (max-width: 1100px) and (min-width: 761px) {
  .game-top-players { grid-template-columns: repeat(6, minmax(0, 1fr)); min-height: 305px; padding: 0 24px 20px; row-gap: 0; }
  .game-top-player { grid-column: span 2; --top-lift: 12px; }
  .game-top-player--avalon { --top-lift: 36px; }
  .game-top-player--uno { --top-lift: 22px; }
  .game-top-player:nth-child(n + 4) { grid-column: span 3; }
  .game-top-player--gobang { --top-lift: 30px; }
  .game-top-player:nth-child(n + 4) .game-top-collectible { max-width: 245px; margin-inline: auto; }
}
@media (max-width: 760px) {
  .game-top-players { grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 390px; padding: 0 24px 22px; column-gap: 24px; row-gap: 0; }
  .game-top-player { --top-lift: 12px; }
  .game-top-player--avalon { --top-lift: 32px; }
  .game-top-player--uno { --top-lift: 22px; }
  .game-top-player--cabo { --top-lift: 0px; }
  .game-top-player--gobang { grid-column: 1 / -1; --top-lift: 0px; }
  .game-top-player--gobang .game-top-collectible { max-width: 220px; margin-inline: auto; }
  .game-top-galaxy { object-position: 48% center; }
}
@media (max-width: 480px) {
  .game-top { margin-bottom: 2rem; }
  .game-top .dash-section-head { flex-wrap: wrap; gap: 4px 8px; margin-bottom: 12px; }
  .game-top .dash-section-sub { font-size: 0.76rem; }
  .game-top-players { padding-inline: 14px; column-gap: 20px; }
  .game-top-collectible { grid-template-columns: 58px minmax(0, 1fr); column-gap: 8px; }
  .game-top-portrait, .game-top .game-top-avatar { width: 46px; height: 46px; }
  .game-top-avatar-frame { inset: -9px; width: calc(100% + 18px); height: calc(100% + 18px); }
  .game-top-name { font-size: 0.86rem; }
  .game-top-score { font-size: 0.72rem; }
  .game-top-copy { display: contents; }
  .game-top-portrait { grid-row: 1; grid-column: 1; margin-block: 12px; }
  .game-top [data-top-name] { grid-column: 2; grid-row: 1; min-width: 0; }
  .game-top-game { grid-row: 2; grid-column: 1 / -1; justify-self: start; }
  .game-top-result { grid-row: 3; grid-column: 1 / -1; }
  .game-top-player--gobang .game-top-collectible { grid-template-columns: 58px minmax(0, 1fr); max-width: 220px; }
  .game-top-player--gobang .game-top-copy { display: block; }
  .game-top-player--gobang .game-top-portrait { grid-row: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .game-top-avatar-visual, .game-top-star, .community-user-hover-card--game-top { animation: none; }
  .game-top-avatar-scale { transition: none; }
  .game-top-star { opacity: 0.45; }
}