/* NEXBET — "Top players" panel in the lobby side column + side-column reflow that accounts for it.
   Loaded after style.css (head.tpl). Tokens only (both themes): --panel/--panel-border/--shadow via .nx-panel,
   --gold-grad, --gold-line, --gold-text, --accent-ink, --skeleton, --line, --muted, --text. */

/* ---- panel ---- */
.nx-tp{padding:16px 20px 12px}
.nx-tp .nx-panel__h{margin-bottom:6px}
.nx-tp__t{min-width:0;flex:1;line-height:1.25}
.nx-tp__live{flex:none;display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:var(--r-pill);border:1px solid var(--gold-line);font-size:10px;font-weight:800;letter-spacing:.8px;color:var(--gold-text)}
.nx-tp__live i{width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px var(--gold);animation:nx-pulse 1.6s ease infinite}
.nx-tp__list{list-style:none;margin:0;padding:0}
.nx-tp__row{display:flex;align-items:center;gap:10px;min-height:40px;padding:5px 6px;border-top:1px solid var(--line);border-radius:0}
.nx-tp__row:first-child{border-top-color:transparent}
.nx-tp__rank{display:grid;place-items:center;width:26px;height:26px;flex:none;border-radius:50%;background:var(--skeleton);color:var(--text);font-size:12px;font-weight:800;font-variant-numeric:tabular-nums}
/* avatar = initial of the nick (first letter of the same text, rest hidden) */
.nx-tp__av{display:block;width:28px;height:28px;flex:none;overflow:hidden;border-radius:50%;border:1px solid var(--line-2);background:var(--surface-2);color:var(--muted);font-size:0;line-height:26px;text-align:center;white-space:nowrap;text-transform:uppercase}
.nx-tp__av::first-letter{font-size:12px;font-weight:800}
.nx-tp__user{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:600}
.nx-tp__sum{flex:none;max-width:48%;overflow:hidden;text-overflow:ellipsis;font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
/* top-3: gold */
.nx-tp__row.is-top .nx-tp__sum{color:var(--gold-text)}
.nx-tp__row.is-top .nx-tp__av{border-color:var(--gold-line);color:var(--gold-text)}
.nx-tp__row.is-1 .nx-tp__rank{background:var(--gold-grad);color:var(--accent-ink);box-shadow:inset 0 1px 0 #fff6c4,0 4px 12px -6px #f5b940aa}
.nx-tp__row.is-2 .nx-tp__rank,.nx-tp__row.is-3 .nx-tp__rank{background:transparent;border:1.5px solid var(--gold-line);color:var(--gold-text)}
.nx-tp__row.is-1{background:linear-gradient(90deg,color-mix(in oklab,var(--gold) 14%,transparent),transparent 78%);border-top-color:transparent}
.nx-tp__row.is-2{border-top-color:transparent}

/* ---- side column ≥1100: always in view ----
   Pinned under the header; its height is limited to the window minus the header and a bottom reserve for the
   chat bubble (56px + margins), so a tall column (balance, bonus, level, top-10, latest winners) scrolls
   inside itself and every widget stays reachable while the page scrolls. Thin scrollbar; when the wheel
   reaches the end of the column the page keeps scrolling (default scroll chaining). Side padding with
   a negative margin keeps the panel shadows/glow from being clipped by the scroller. */
@media (min-width:1100px){
  .nx-lobby__side{
    --nx-side-top:80px;--nx-side-reserve:84px;
    position:sticky;top:var(--nx-side-top);bottom:auto;align-self:start;
    max-height:calc(100vh - var(--nx-side-top) - var(--nx-side-reserve));
    max-height:calc(100dvh - var(--nx-side-top) - var(--nx-side-reserve));
    min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:auto;
    margin:-6px -8px;padding:6px 8px;
    scrollbar-width:thin;scrollbar-color:var(--line-2) transparent;
  }
  .nx-lobby__side>*{flex-shrink:0}
  .nx-lobby__side::-webkit-scrollbar{width:6px}
  .nx-lobby__side::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:3px}
  .nx-lobby__side::-webkit-scrollbar-track{background:transparent}
}

/* ---- tablet: side column is 2-up under the games, the panel takes the full row, list in two halves ---- */
@media (max-width:1099px){
  .nx-lobby__side>.nx-tp,.nx-lobby__side>.nx-wins{grid-column:1/-1}
  /* an odd number of cards before the panel would leave a hole next to the last one */
  .nx-lobby__side>:nth-child(odd):has(+ .nx-tp){grid-column:1/-1}
  .nx-tp__list{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-auto-flow:column;grid-template-rows:repeat(5,auto);column-gap:28px}
  .nx-tp__row:nth-child(6){border-top-color:transparent}
}

/* ---- phones: one column in the flow ---- */
@media (max-width:639px){
  .nx-tp{padding:14px 14px 8px}
  .nx-tp__list{display:block}
  .nx-tp__row:nth-child(6){border-top-color:var(--line)}
  .nx-tp__row{min-height:44px}
}
@media (max-width:359px){
  .nx-tp__av{display:none}
}