/* Public leaderboard page (standalone, no SPA shell).

   Scrolling model: body is the fixed-size scroll container.
   - html stays at the global `height: 100%; overflow: hidden` (set in style.css)
   - body overrides to `height: 100%; overflow-y: auto` so the document content
     scrolls inside the body element.

   Why body-as-scroller and not html-as-scroller or native document scroll:
   the previous attempt set `html { height: auto; overflow-y: auto }` which is
   self-contradicting (auto-height means html sizes to content, so there's
   nothing for overflow-y to scroll), and on iOS Safari nothing scrolled at
   all. Body with a fixed 100% height and overflow-y: auto is the most
   reliable iOS pattern. */
/* !important is defensive: an earlier rule in appeals-theme.css forces
   `html, body { overflow: hidden !important }` at <=768px for the dashboard
   SPA. That rule is now scoped to skip this body, but keep the !important
   here so a future global tweak can't silently kill scrolling again. */
body.public-leaderboard-body {
  height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  background: var(--bg-content);
}

.public-leaderboard-shell {
  width: 100%;
  min-height: 100%;
  padding: 24px 26px 38px;
}

.public-leaderboard-shell .page {
  display: block;
  max-width: 1120px;
  margin: 0 auto;
}

.public-leaderboard-shell .page[hidden] {
  display: none;
}

.public-state-card {
  width: min(100% - 42px, 720px);
  min-height: 300px;
  margin: 72px auto 0;
  display: grid;
  place-items: center;
  place-content: center;
  gap: 16px;
  padding: 28px;
  text-align: center;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.public-state-card[hidden] {
  display: none !important;
}

.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(255, 255, 255, 0.12);
  border-top-color: var(--teal);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

#lb-card {
  border-radius: 24px;
  padding: 22px 24px 20px;
}

#levels-list {
  position: relative;
  z-index: 1;
}

.lb-row {
  position: relative;
  z-index: 1;
  /* Accept vertical pans as scroll gestures (not taps). Paired with the
     touchmove guard in leaderboard.js. */
  touch-action: pan-y;
}

.lb-public-stats input,
#lb-public-stats input {
  pointer-events: none;
}

/* Stats modal: do NOT override .modal's transform here. .modal-open's
   keyframe sets `transform: translate(-50%, -50%)` as its final frame with
   fill-mode: both, so any `transform: none` override gets clobbered the
   moment the modal opens (which parked the modal at the top-left corner in
   a previous attempt). Just resize, never reposition. */
.public-leaderboard-body .modal.lb-user-modal {
  width: min(94vw, 760px);
  max-width: min(94vw, 760px);
  max-height: min(88vh, 88dvh);
}

.public-leaderboard-body .modal-body {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Tablet */
@media (max-width: 760px) {
  .public-leaderboard-shell {
    padding: 18px 14px 30px;
  }

  .public-state-card {
    width: 100%;
    margin-top: 34px;
  }

  #lb-card {
    padding: 16px 14px 14px;
    border-radius: 18px;
  }
}

/* Phone */
@media (max-width: 520px) {
  .public-leaderboard-shell {
    padding: 14px 10px 28px;
  }

  #lb-card {
    padding: 12px 10px 12px;
    border-radius: 16px;
  }

  /* Tighter row spacing + smaller avatar so the rank + name + value all fit
     comfortably without forcing horizontal scroll. */
  .lb-row {
    gap: 10px !important;
    padding: 10px 2px !important;
  }

  .lb-row img,
  .lb-row > div:nth-child(2) > div {
    width: 32px !important;
    height: 32px !important;
    border-radius: 7px !important;
  }

  /* Stats modal: stay centered, just hug the viewport. */
  .public-leaderboard-body .modal.lb-user-modal {
    width: min(96vw, 520px);
    max-width: 96vw;
    max-height: min(92vh, 92dvh);
  }
}