:root {
  /* ===================================================================
     TEN INDEPENDENT RANKING ROWS — EDIT THIS SECTION ONLY

     Every row has its own:
     - Rank position and text size
     - Avatar position and size
     - Player-name position, width and text size
     - Points position, width and text size

     LEFT: increase to move RIGHT
     TOP:  increase to move DOWN

     Positions are measured from the top-left of that individual row.
     =================================================================== */


  /* ===================================================================
     COMPLETE TEN-ROW AREA
     =================================================================== */

  --lb-ranking-list-top: 19.35%;
  --lb-ranking-list-left: 5.65%;
  --lb-ranking-list-right: 5.65%;
  --lb-ranking-list-height: 64.15%;
  --lb-ranking-row-gap: 0.52%;

  /* RANKED PLAYER COUNT — empty square at the top-right of the artwork. */
  --lb-ranking-count-top: 2.75%;
  --lb-ranking-count-right: 7.05%;
  --lb-ranking-count-width: 11.5%;
  --lb-ranking-count-height: 5.3%;
  --lb-ranking-count-font-size: 24px;


  /* ===================================================================
     ROW 1
     =================================================================== */

  /* ROW 1 — RANK NUMBER */
  --row-1-rank-left: 2.0%;
  --row-1-rank-top: -41%;
  --row-1-rank-width: 12%;
  --row-1-rank-text-size: 24px;

  /* ROW 1 — AVATAR */
  --row-1-avatar-left: 19.0%;
  --row-1-avatar-top: -69.5%;
  --row-1-avatar-size: 62px;

  /* ROW 1 — PLAYER NAME */
  --row-1-name-left: 34.5%;
  --row-1-name-top: -50%;
  --row-1-name-width: 43%;
  --row-1-name-text-size: 16px;

  /* ROW 1 — POINTS */
  --row-1-points-left: 76.5%;
  --row-1-points-top: -50%;
  --row-1-points-width: 18%;
  --row-1-points-text-size: 22px;

  /* ===================================================================
     ROW 2
     =================================================================== */

  /* ROW 2 — RANK NUMBER */
  --row-2-rank-left: 2.0%;
  --row-2-rank-top: -19%;
  --row-2-rank-width: 12%;
  --row-2-rank-text-size: 24px;

  /* ROW 2 — AVATAR */
  --row-2-avatar-left: 19.0%;
  --row-2-avatar-top: -50%;
  --row-2-avatar-size: 62px;

  /* ROW 2 — PLAYER NAME */
  --row-2-name-left: 34.5%;
  --row-2-name-top: -31%;
  --row-2-name-width: 43%;
  --row-2-name-text-size: 16px;

  /* ROW 2 — POINTS */
  --row-2-points-left: 76.5%;
  --row-2-points-top: -30%;
  --row-2-points-width: 18%;
  --row-2-points-text-size: 22px;

  /* ===================================================================
     ROW 3
     =================================================================== */

  /* ROW 3 — RANK NUMBER */
  --row-3-rank-left: 2.0%;
  --row-3-rank-top: 0%;
  --row-3-rank-width: 12%;
  --row-3-rank-text-size: 24px;

  /* ROW 3 — AVATAR */
  --row-3-avatar-left: 19.0%;
  --row-3-avatar-top: -30%;
  --row-3-avatar-size: 62px;

  /* ROW 3 — PLAYER NAME */
  --row-3-name-left: 34.5%;
  --row-3-name-top: -11%;
  --row-3-name-width: 43%;
  --row-3-name-text-size: 16px;

  /* ROW 3 — POINTS */
  --row-3-points-left: 76.5%;
  --row-3-points-top: -12%;
  --row-3-points-width: 18%;
  --row-3-points-text-size: 22px;

  /* ===================================================================
     ROW 4
     =================================================================== */

  /* ROW 4 — RANK NUMBER */
  --row-4-rank-left: 2.0%;
  --row-4-rank-top: 20%;
  --row-4-rank-width: 12%;
  --row-4-rank-text-size: 24px;

  /* ROW 4 — AVATAR */
  --row-4-avatar-left: 19.0%;
  --row-4-avatar-top: -12%;
  --row-4-avatar-size: 62px;

  /* ROW 4 — PLAYER NAME */
  --row-4-name-left: 34.5%;
  --row-4-name-top: 10%;
  --row-4-name-width: 43%;
  --row-4-name-text-size: 16px;

  /* ROW 4 — POINTS */
  --row-4-points-left: 76.5%;
  --row-4-points-top: 6.5%;
  --row-4-points-width: 18%;
  --row-4-points-text-size: 22px;

  /* ===================================================================
     ROW 5
     =================================================================== */

  /* ROW 5 — RANK NUMBER */
  --row-5-rank-left: 2.0%;
  --row-5-rank-top: 34%;
  --row-5-rank-width: 12%;
  --row-5-rank-text-size: 24px;

  /* ROW 5 — AVATAR */
  --row-5-avatar-left: 19.0%;
  --row-5-avatar-top: 8.5%;
  --row-5-avatar-size: 62px;

  /* ROW 5 — PLAYER NAME */
  --row-5-name-left: 34.5%;
  --row-5-name-top: 29%;
  --row-5-name-width: 43%;
  --row-5-name-text-size: 16px;

  /* ROW 5 — POINTS */
  --row-5-points-left: 76.5%;
  --row-5-points-top: 25%;
  --row-5-points-width: 18%;
  --row-5-points-text-size: 22px;

  /* ===================================================================
     ROW 6
     =================================================================== */

  /* ROW 6 — RANK NUMBER */
  --row-6-rank-left: 2.0%;
  --row-6-rank-top: 51%;
  --row-6-rank-width: 12%;
  --row-6-rank-text-size: 24px;

  /* ROW 6 — AVATAR */
  --row-6-avatar-left: 19.0%;
  --row-6-avatar-top: 28%;
  --row-6-avatar-size: 62px;

  /* ROW 6 — PLAYER NAME */
  --row-6-name-left: 34.5%;
  --row-6-name-top: 47%;
  --row-6-name-width: 43%;
  --row-6-name-text-size: 16px;

  /* ROW 6 — POINTS */
  --row-6-points-left: 76.5%;
  --row-6-points-top: 45%;
  --row-6-points-width: 18%;
  --row-6-points-text-size: 22px;

  /* ===================================================================
     ROW 7
     =================================================================== */

  /* ROW 7 — RANK NUMBER */
  --row-7-rank-left: 2.0%;
  --row-7-rank-top: 71%;
  --row-7-rank-width: 12%;
  --row-7-rank-text-size: 24px;

  /* ROW 7 — AVATAR */
  --row-7-avatar-left: 19.0%;
  --row-7-avatar-top: 46.5%;
  --row-7-avatar-size: 62px;

  /* ROW 7 — PLAYER NAME */
  --row-7-name-left: 34.5%;
  --row-7-name-top: 66%;
  --row-7-name-width: 43%;
  --row-7-name-text-size: 16px;

  /* ROW 7 — POINTS */
  --row-7-points-left: 76.5%;
  --row-7-points-top: 65%;
  --row-7-points-width: 18%;
  --row-7-points-text-size: 22px;

  /* ===================================================================
     ROW 8
     =================================================================== */

  /* ROW 8 — RANK NUMBER */
  --row-8-rank-left: 2.0%;
  --row-8-rank-top: 90%;
  --row-8-rank-width: 12%;
  --row-8-rank-text-size: 24px;

  /* ROW 8 — AVATAR */
  --row-8-avatar-left: 19.0%;
  --row-8-avatar-top: 67%;
  --row-8-avatar-size: 62px;

  /* ROW 8 — PLAYER NAME */
  --row-8-name-left: 34.5%;
  --row-8-name-top: 85%;
  --row-8-name-width: 43%;
  --row-8-name-text-size: 16px;

  /* ROW 8 — POINTS */
  --row-8-points-left: 76.5%;
  --row-8-points-top: 83%;
  --row-8-points-width: 18%;
  --row-8-points-text-size: 22px;

  /* ===================================================================
     ROW 9
     =================================================================== */

  /* ROW 9 — RANK NUMBER */
  --row-9-rank-left: 2.0%;
  --row-9-rank-top: 112%;
  --row-9-rank-width: 12%;
  --row-9-rank-text-size: 24px;

  /* ROW 9 — AVATAR */
  --row-9-avatar-left: 19.0%;
  --row-9-avatar-top: 87%;
  --row-9-avatar-size: 62px;

  /* ROW 9 — PLAYER NAME */
  --row-9-name-left: 34.5%;
  --row-9-name-top: 105%;
  --row-9-name-width: 43%;
  --row-9-name-text-size: 16px;

  /* ROW 9 — POINTS */
  --row-9-points-left: 76.5%;
  --row-9-points-top: 100%;
  --row-9-points-width: 18%;
  --row-9-points-text-size: 22px;

  /* ===================================================================
     ROW 10
     =================================================================== */

  /* ROW 10 — RANK NUMBER */
  --row-10-rank-left: 2.0%;
  --row-10-rank-top: 128%;
  --row-10-rank-width: 12%;
  --row-10-rank-text-size: 24px;

  /* ROW 10 — AVATAR */
  --row-10-avatar-left: 19.0%;
  --row-10-avatar-top: 104%;
  --row-10-avatar-size: 62px;

  /* ROW 10 — PLAYER NAME */
  --row-10-name-left: 34.5%;
  --row-10-name-top: 123%;
  --row-10-name-width: 43%;
  --row-10-name-text-size: 16px;

  /* ROW 10 — POINTS */
  --row-10-points-left: 76.5%;
  --row-10-points-top: 120%;
  --row-10-points-width: 18%;
  --row-10-points-text-size: 22px;


  /* ===================================================================
     PAGINATION
     =================================================================== */

  --lb-ranking-footer-left: 8.8%;
  --lb-ranking-footer-right: 8.8%;
  --lb-ranking-footer-bottom: 4.35%;
  --lb-ranking-footer-height: 2%;


  /* ===================================================================
     OTHER EXISTING LEADERBOARD SETTINGS
     =================================================================== */

  --lb-page-width: 1536px;
  --lb-page-pad-top: 62px;
  --lb-page-pad-side: 22px;
  --lb-page-pad-bottom: 110px;
  --lb-section-gap: 22px;
  --lb-main-gap: 22px;
  --lb-ranking-width: 520px;

  --lb-avatar-first: 124px;
  --lb-avatar-other: 104px;

  --lb-toolbar-margin-bottom: 22px;
  --lb-toolbar-brand-left: 5.25%;
  --lb-toolbar-brand-width: 21%;
  --lb-toolbar-brand-center-y: 35%;
  --lb-toolbar-controls-left: 29%;
  --lb-toolbar-controls-right: 5.25%;
  --lb-toolbar-controls-center-y: 35%;
  --lb-toolbar-controls-gap: 24px;
  --lb-toolbar-server-width: 520px;
  --lb-toolbar-tabs-width: 245px;
  --lb-toolbar-control-height: 46px;

  --lb-top-panel-margin-bottom: 22px;
  --lb-top-rank-2-left: 3.0%;
  --lb-top-rank-2-top: 29.5%;
  --lb-top-rank-2-width: 27%;
  --lb-top-rank-2-height: 62%;
  --lb-top-rank-1-left: 34.4%;
  --lb-top-rank-1-top: 32%;
  --lb-top-rank-1-width: 31.2%;
  --lb-top-rank-1-height: 62%;
  --lb-top-rank-3-right: 3.5%;
  --lb-top-rank-3-top: 29.5%;
  --lb-top-rank-3-width: 27%;
  --lb-top-rank-3-height: 62%;

  --lb-ranking-image-width: 896px;
  --lb-ranking-image-height: 1728px;

  --lb-red: #d12e22;
  --lb-red-dark: #771910;
  --lb-orange: #e87931;
  --lb-green: #57c768;
  --lb-danger: #ff4f47;
  --lb-white: #f2f2f0;
  --lb-muted: #9b9b9f;
  --lb-panel: rgba(8, 9, 9, 0.97);
  --lb-cut: 18px;


  /* ===================================================================
     SELECTED SURVIVOR OVERLAY CONFIG — EDIT THIS SECTION ONLY

     LEFT:   increase to move RIGHT
     TOP:    increase to move DOWN
     RIGHT:  increase to move LEFT
     BOTTOM: increase to move UP

     All positions are percentages of the selected-survivor artwork panel.
     =================================================================== */

  /* Fixed panel height: matches the ten-player rankings panel. */
  --ss-panel-height-multiplier: 1.9285714286;

  /* PLAYER AVATAR — always forced square. */
  --ss-avatar-left: 6%;
  --ss-avatar-top: 4.1%;
  --ss-avatar-size: 11%;

  /* PLAYER NAME. */
  --ss-name-left: 18.00%;
  --ss-name-top: 8.10%;
  --ss-name-width: 54.00%;
  --ss-name-font-size: clamp(1.20rem, 2.05vw, 2.05rem);

  /* WIPE / OVERALL LABEL.
     The solid backing covers the fixed THIS WIPE wording in the artwork,
     allowing the live PHP label to be shown once and to change to OVERALL. */
  --ss-scope-left: 17.95%;
  --ss-scope-top: 13.20%;
  --ss-scope-width: 11.50%;
  --ss-scope-height: 2.55%;
  --ss-scope-font-size: clamp(0.58rem, 0.75vw, 0.72rem);
  --ss-scope-cover: #0c0d0e;

  /* LARGE FINAL SCORE IN THE TOP-RIGHT BOX. */
  --ss-final-score-right: 6%;
  --ss-final-score-top: 6.5%;
  --ss-final-score-width: 13.60%;
  --ss-final-score-height: 5.70%;
  --ss-final-score-font-size: clamp(2rem, 4vw, 3.70rem);

  /* COMPLETE TWO-COLUMN SCORE AREA. */
  --ss-board-top: 18.90%;
  --ss-board-right: 4.70%;
  --ss-board-bottom: 11.35%;
  --ss-board-left: 4.70%;
  --ss-board-gap: 1.25%;

  /* EARNED / LOST TOTALS IN EACH SECTION HEADER. */
  --ss-section-total-top: 50%;
  --ss-section-total-right: 4.30%;
  --ss-section-total-font-size: clamp(1rem, 1.65vw, 1.55rem);

  /* ACTIVITY / COUNT / POINTS COLUMN HEADINGS. */
  --ss-columns-top: 11.60%;
  --ss-columns-side: 2.70%;
  --ss-columns-height: 4.20%;
  --ss-count-column-width: 50px;
  --ss-points-column-width: 62px;
  --ss-column-gap: 7px;

  /* ALL LIVE ACTIVITY ROWS. */
  --ss-rows-top: 15.15%;
  --ss-rows-side: 2.70%;
  --ss-rows-bottom: 5.65%;
  --ss-row-name-size: clamp(0.57rem, 0.73vw, 0.75rem);
  --ss-row-value-size: clamp(0.58rem, 0.72vw, 0.74rem);

  /* Number of compact row slots available inside each fixed table.
     Visible activities fill these slots from the TOP down. */
  --ss-visible-row-slots: 20;

  /* COMPLETE BOTTOM TOTALS AREA. */
  --ss-footer-left: 0%;
  --ss-footer-right: 5.20%;
  --ss-footer-bottom: 1.60%;
  --ss-footer-height: 10.3%;
  --ss-footer-gap: 1.15%;

  /* INDIVIDUAL BOTTOM VALUES. */
  --ss-total-earned-right: 5.80%;
  --ss-total-lost-right: 5.80%;
  --ss-total-final-right: 16.50%;
  --ss-footer-value-top: 50%;
  --ss-footer-value-size: clamp(0.90rem, 1.30vw, 1.24rem);
  --ss-footer-final-size: clamp(1rem, 1.55vw, 1.42rem);
}

* {
  box-sizing: border-box;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.leaderboard-page {
  min-height: calc(100vh - 108px);
  padding: var(--lb-page-pad-top) var(--lb-page-pad-side) var(--lb-page-pad-bottom);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.76), rgba(0, 0, 0, 0.96)),
    url('/rust/assets/images/rust-hero.webp') center top / cover scroll;
  color: var(--lb-white);
}

.leaderboard-shell {
  width: 100%;
  max-width: var(--lb-page-width);
  margin: 0 auto;
}

.lb-frame {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  clip-path: polygon(
    var(--lb-cut) 0,
    calc(100% - var(--lb-cut)) 0,
    100% var(--lb-cut),
    100% calc(100% - var(--lb-cut)),
    calc(100% - var(--lb-cut)) 100%,
    var(--lb-cut) 100%,
    0 calc(100% - var(--lb-cut)),
    0 var(--lb-cut)
  );
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 32%),
    linear-gradient(90deg, rgba(209, 46, 34, 0.07), transparent 24%, transparent 76%, rgba(209, 46, 34, 0.05)),
    var(--lb-panel);
  box-shadow:
    inset 0 0 0 6px rgba(0, 0, 0, 0.35),
    inset 0 0 0 7px rgba(255, 255, 255, 0.035),
    inset 0 -28px 70px rgba(0, 0, 0, 0.45);
}

.lb-frame::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 0;
  right: 54px;
  left: 54px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--lb-red) 16%, var(--lb-red) 84%, transparent);
  opacity: 0.8;
  pointer-events: none;
}

.lb-frame::after {
  content: '';
  position: absolute;
  z-index: 0;
  right: 12px;
  bottom: 12px;
  width: 52px;
  height: 7px;
  border-right: 18px solid var(--lb-red-dark);
  border-left: 18px solid var(--lb-red-dark);
  opacity: 0.9;
  pointer-events: none;
}

.lb-frame > * {
  position: relative;
  z-index: 1;
}

.leaderboard-control-panel,
.top-survivors {
  position: relative;
  display: block;
  width: max-content;
  min-width: 0;
  max-width: none;
  height: auto;
  min-height: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  background: none;
  box-shadow: none;
  clip-path: none;
}

.leaderboard-control-panel {
  margin: 0 auto var(--lb-toolbar-margin-bottom);
}

.top-survivors {
  margin: 0 auto var(--lb-top-panel-margin-bottom);
}

.leaderboard-toolbar-image,
.top-survivors-panel-image {
  display: block;
  width: auto;
  min-width: 0;
  max-width: none;
  height: auto;
  min-height: 0;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
}

.leaderboard-brand,
.leaderboard-controls {
  z-index: 2;
}

.leaderboard-brand {
  position: absolute;
  top: var(--lb-toolbar-brand-center-y);
  left: var(--lb-toolbar-brand-left);
  width: var(--lb-toolbar-brand-width);
  min-width: 0;
  transform: translateY(-50%);
}

.leaderboard-brand p,
.leaderboard-brand h1,
.leaderboard-brand span {
  margin: 0;
}

.leaderboard-brand p {
  overflow: hidden;
  color: var(--lb-white);
  font-size: clamp(0.74rem, 0.82vw, 0.96rem);
  font-weight: 950;
  letter-spacing: 0.08em;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.leaderboard-brand h1 {
  margin-top: 10px;
  color: var(--lb-white);
  font-size: clamp(1.02rem, 1.32vw, 1.46rem);
  line-height: 1;
  letter-spacing: 0.31em;
  text-transform: uppercase;
  white-space: nowrap;
}

.leaderboard-brand > span {
  display: none;
}

.leaderboard-controls {
  position: absolute;
  top: var(--lb-toolbar-controls-center-y);
  left: var(--lb-toolbar-controls-left);
  right: var(--lb-toolbar-controls-right);
  display: grid;
  grid-template-columns:
    minmax(0, var(--lb-toolbar-server-width))
    var(--lb-toolbar-tabs-width);
  justify-content: center;
  align-items: end;
  gap: var(--lb-toolbar-controls-gap);
  width: auto;
  min-width: 0;
  transform: translateY(-50%);
}

.server-control {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.server-control > span,
.selected-player small,
.selected-score span,
.selected-score small,
.score-section header span,
.score-summary span,
.score-columns {
  color: var(--lb-muted);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.server-control select {
  width: 100%;
  height: var(--lb-toolbar-control-height);
  min-width: 0;
  padding: 0 42px 0 15px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 0;
  outline: 0;
  background: rgba(5, 6, 6, 0.9);
  color: var(--lb-white);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
}

.scope-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: var(--lb-toolbar-tabs-width);
  height: var(--lb-toolbar-control-height);
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(5, 6, 6, 0.9);
}

.scope-switch a {
  display: grid;
  min-width: 0;
  min-height: 0;
  padding: 0 15px;
  place-items: center;
  color: #b6b6b9;
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-decoration: none;
}

.scope-switch a + a {
  border-left: 1px solid rgba(255, 255, 255, 0.13);
}

.scope-switch a.is-active {
  background: var(--lb-red);
  color: #fff;
}

.podium {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.podium-player {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
  clip-path: none;
  color: var(--lb-white);
  font: inherit;
  text-align: center;
  cursor: pointer;
}

.podium-player.rank-2 {
  top: var(--lb-top-rank-2-top);
  left: var(--lb-top-rank-2-left);
  width: var(--lb-top-rank-2-width);
  height: var(--lb-top-rank-2-height);
}

.podium-player.rank-1 {
  top: var(--lb-top-rank-1-top);
  left: var(--lb-top-rank-1-left);
  width: var(--lb-top-rank-1-width);
  height: var(--lb-top-rank-1-height);
}

.podium-player.rank-3 {
  top: var(--lb-top-rank-3-top);
  right: var(--lb-top-rank-3-right);
  width: var(--lb-top-rank-3-width);
  height: var(--lb-top-rank-3-height);
}

.podium-player:focus-visible {
  outline: 2px solid var(--lb-orange);
  outline-offset: -18px;
}

.podium-avatar-wrap,
.selected-avatar {
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.18);
  background: #101111;
}

.podium-avatar-wrap {
  width: var(--lb-avatar-other);
  height: var(--lb-avatar-other);
  box-shadow: inset 0 0 0 5px rgba(0, 0, 0, 0.48);
}

.rank-1 .podium-avatar-wrap {
  width: var(--lb-avatar-first);
  height: var(--lb-avatar-first);
  border-color: rgba(232, 121, 49, 0.62);
}

.podium-avatar-wrap img,
.selected-avatar img,
.ranking-player img,
.avatar-fallback {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-fallback {
  display: grid;
  place-items: center;
  background: #171818;
  color: var(--lb-orange);
  font-weight: 950;
}

.podium-copy {
  min-width: 0;
  max-width: 82%;
}

.podium-copy strong,
.podium-copy b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.podium-copy strong {
  font-size: clamp(1.05rem, 1.45vw, 1.42rem);
  line-height: 1.1;
}

.podium-copy b {
  margin-top: 6px;
  color: var(--lb-orange);
  font-size: clamp(1.35rem, 2vw, 2.05rem);
  line-height: 1;
}

.leaderboard-main {
  display: grid;
  grid-template-columns: minmax(340px, var(--lb-ranking-width)) minmax(0, 1fr);
  align-items: start;
  gap: var(--lb-main-gap);
  margin-bottom: var(--lb-section-gap);
}

/* =========================================================
   NEW FIXED RANKINGS ARTWORK PANEL
   ========================================================= */

.ranking-panel {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: var(--lb-ranking-image-width);
  aspect-ratio: 896 / 1728;
  min-width: 0;
  margin: 0 auto;
  overflow: hidden;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.ranking-panel-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}

/* Live ranked-player total for the selected scope (This Wipe / Overall). */
.ranking-player-count {
  position: absolute;
  z-index: 2;
  top: var(--lb-ranking-count-top);
  right: var(--lb-ranking-count-right);
  display: grid;
  width: var(--lb-ranking-count-width);
  height: var(--lb-ranking-count-height);
  margin: 0;
  padding: 0;
  place-items: center;
  color: #f2f2f2;
  font-size: var(--lb-ranking-count-font-size);
  font-weight: 950;
  line-height: 1;
  text-align: center;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.9);
  pointer-events: none;
  user-select: none;
}

.ranking-list {
  position: absolute;
  z-index: 2;
  top: var(--lb-ranking-list-top);
  left: var(--lb-ranking-list-left);
  right: var(--lb-ranking-list-right);
  height: var(--lb-ranking-list-height);
  display: grid;
  grid-template-rows: repeat(10, minmax(0, 1fr));
  gap: var(--lb-ranking-row-gap);
  margin: 0;
  padding: 0;
  overflow: visible;
}

/* Each entry is one fixed row slot. */
.ranking-entry {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  appearance: none;
  overflow: visible;
  border: 0;
  background: transparent;
  color: var(--lb-white);
  font: inherit;
  text-align: left;
  cursor: pointer;
}


.ranking-entry:nth-child(1) {
  --current-rank-left: var(--row-1-rank-left);
  --current-rank-top: var(--row-1-rank-top);
  --current-rank-width: var(--row-1-rank-width);
  --current-rank-text-size: var(--row-1-rank-text-size);

  --current-avatar-left: var(--row-1-avatar-left);
  --current-avatar-top: var(--row-1-avatar-top);
  --current-avatar-size: var(--row-1-avatar-size);

  --current-name-left: var(--row-1-name-left);
  --current-name-top: var(--row-1-name-top);
  --current-name-width: var(--row-1-name-width);
  --current-name-text-size: var(--row-1-name-text-size);

  --current-points-left: var(--row-1-points-left);
  --current-points-top: var(--row-1-points-top);
  --current-points-width: var(--row-1-points-width);
  --current-points-text-size: var(--row-1-points-text-size);
}

.ranking-entry:nth-child(2) {
  --current-rank-left: var(--row-2-rank-left);
  --current-rank-top: var(--row-2-rank-top);
  --current-rank-width: var(--row-2-rank-width);
  --current-rank-text-size: var(--row-2-rank-text-size);

  --current-avatar-left: var(--row-2-avatar-left);
  --current-avatar-top: var(--row-2-avatar-top);
  --current-avatar-size: var(--row-2-avatar-size);

  --current-name-left: var(--row-2-name-left);
  --current-name-top: var(--row-2-name-top);
  --current-name-width: var(--row-2-name-width);
  --current-name-text-size: var(--row-2-name-text-size);

  --current-points-left: var(--row-2-points-left);
  --current-points-top: var(--row-2-points-top);
  --current-points-width: var(--row-2-points-width);
  --current-points-text-size: var(--row-2-points-text-size);
}

.ranking-entry:nth-child(3) {
  --current-rank-left: var(--row-3-rank-left);
  --current-rank-top: var(--row-3-rank-top);
  --current-rank-width: var(--row-3-rank-width);
  --current-rank-text-size: var(--row-3-rank-text-size);

  --current-avatar-left: var(--row-3-avatar-left);
  --current-avatar-top: var(--row-3-avatar-top);
  --current-avatar-size: var(--row-3-avatar-size);

  --current-name-left: var(--row-3-name-left);
  --current-name-top: var(--row-3-name-top);
  --current-name-width: var(--row-3-name-width);
  --current-name-text-size: var(--row-3-name-text-size);

  --current-points-left: var(--row-3-points-left);
  --current-points-top: var(--row-3-points-top);
  --current-points-width: var(--row-3-points-width);
  --current-points-text-size: var(--row-3-points-text-size);
}

.ranking-entry:nth-child(4) {
  --current-rank-left: var(--row-4-rank-left);
  --current-rank-top: var(--row-4-rank-top);
  --current-rank-width: var(--row-4-rank-width);
  --current-rank-text-size: var(--row-4-rank-text-size);

  --current-avatar-left: var(--row-4-avatar-left);
  --current-avatar-top: var(--row-4-avatar-top);
  --current-avatar-size: var(--row-4-avatar-size);

  --current-name-left: var(--row-4-name-left);
  --current-name-top: var(--row-4-name-top);
  --current-name-width: var(--row-4-name-width);
  --current-name-text-size: var(--row-4-name-text-size);

  --current-points-left: var(--row-4-points-left);
  --current-points-top: var(--row-4-points-top);
  --current-points-width: var(--row-4-points-width);
  --current-points-text-size: var(--row-4-points-text-size);
}

.ranking-entry:nth-child(5) {
  --current-rank-left: var(--row-5-rank-left);
  --current-rank-top: var(--row-5-rank-top);
  --current-rank-width: var(--row-5-rank-width);
  --current-rank-text-size: var(--row-5-rank-text-size);

  --current-avatar-left: var(--row-5-avatar-left);
  --current-avatar-top: var(--row-5-avatar-top);
  --current-avatar-size: var(--row-5-avatar-size);

  --current-name-left: var(--row-5-name-left);
  --current-name-top: var(--row-5-name-top);
  --current-name-width: var(--row-5-name-width);
  --current-name-text-size: var(--row-5-name-text-size);

  --current-points-left: var(--row-5-points-left);
  --current-points-top: var(--row-5-points-top);
  --current-points-width: var(--row-5-points-width);
  --current-points-text-size: var(--row-5-points-text-size);
}

.ranking-entry:nth-child(6) {
  --current-rank-left: var(--row-6-rank-left);
  --current-rank-top: var(--row-6-rank-top);
  --current-rank-width: var(--row-6-rank-width);
  --current-rank-text-size: var(--row-6-rank-text-size);

  --current-avatar-left: var(--row-6-avatar-left);
  --current-avatar-top: var(--row-6-avatar-top);
  --current-avatar-size: var(--row-6-avatar-size);

  --current-name-left: var(--row-6-name-left);
  --current-name-top: var(--row-6-name-top);
  --current-name-width: var(--row-6-name-width);
  --current-name-text-size: var(--row-6-name-text-size);

  --current-points-left: var(--row-6-points-left);
  --current-points-top: var(--row-6-points-top);
  --current-points-width: var(--row-6-points-width);
  --current-points-text-size: var(--row-6-points-text-size);
}

.ranking-entry:nth-child(7) {
  --current-rank-left: var(--row-7-rank-left);
  --current-rank-top: var(--row-7-rank-top);
  --current-rank-width: var(--row-7-rank-width);
  --current-rank-text-size: var(--row-7-rank-text-size);

  --current-avatar-left: var(--row-7-avatar-left);
  --current-avatar-top: var(--row-7-avatar-top);
  --current-avatar-size: var(--row-7-avatar-size);

  --current-name-left: var(--row-7-name-left);
  --current-name-top: var(--row-7-name-top);
  --current-name-width: var(--row-7-name-width);
  --current-name-text-size: var(--row-7-name-text-size);

  --current-points-left: var(--row-7-points-left);
  --current-points-top: var(--row-7-points-top);
  --current-points-width: var(--row-7-points-width);
  --current-points-text-size: var(--row-7-points-text-size);
}

.ranking-entry:nth-child(8) {
  --current-rank-left: var(--row-8-rank-left);
  --current-rank-top: var(--row-8-rank-top);
  --current-rank-width: var(--row-8-rank-width);
  --current-rank-text-size: var(--row-8-rank-text-size);

  --current-avatar-left: var(--row-8-avatar-left);
  --current-avatar-top: var(--row-8-avatar-top);
  --current-avatar-size: var(--row-8-avatar-size);

  --current-name-left: var(--row-8-name-left);
  --current-name-top: var(--row-8-name-top);
  --current-name-width: var(--row-8-name-width);
  --current-name-text-size: var(--row-8-name-text-size);

  --current-points-left: var(--row-8-points-left);
  --current-points-top: var(--row-8-points-top);
  --current-points-width: var(--row-8-points-width);
  --current-points-text-size: var(--row-8-points-text-size);
}

.ranking-entry:nth-child(9) {
  --current-rank-left: var(--row-9-rank-left);
  --current-rank-top: var(--row-9-rank-top);
  --current-rank-width: var(--row-9-rank-width);
  --current-rank-text-size: var(--row-9-rank-text-size);

  --current-avatar-left: var(--row-9-avatar-left);
  --current-avatar-top: var(--row-9-avatar-top);
  --current-avatar-size: var(--row-9-avatar-size);

  --current-name-left: var(--row-9-name-left);
  --current-name-top: var(--row-9-name-top);
  --current-name-width: var(--row-9-name-width);
  --current-name-text-size: var(--row-9-name-text-size);

  --current-points-left: var(--row-9-points-left);
  --current-points-top: var(--row-9-points-top);
  --current-points-width: var(--row-9-points-width);
  --current-points-text-size: var(--row-9-points-text-size);
}

.ranking-entry:nth-child(10) {
  --current-rank-left: var(--row-10-rank-left);
  --current-rank-top: var(--row-10-rank-top);
  --current-rank-width: var(--row-10-rank-width);
  --current-rank-text-size: var(--row-10-rank-text-size);

  --current-avatar-left: var(--row-10-avatar-left);
  --current-avatar-top: var(--row-10-avatar-top);
  --current-avatar-size: var(--row-10-avatar-size);

  --current-name-left: var(--row-10-name-left);
  --current-name-top: var(--row-10-name-top);
  --current-name-width: var(--row-10-name-width);
  --current-name-text-size: var(--row-10-name-text-size);

  --current-points-left: var(--row-10-points-left);
  --current-points-top: var(--row-10-points-top);
  --current-points-width: var(--row-10-points-width);
  --current-points-text-size: var(--row-10-points-text-size);
}


.ranking-entry:hover,
.ranking-entry:focus-visible {
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  outline: none;
}

/* Selected player stays completely clear — no red glow or overlay. */
.ranking-entry.is-selected {
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  outline: none;
}

/* =========================================================
   CLICKABLE ROW PARTS
   The full invisible row does not receive clicks.
   Only the visible rank, avatar, name and points receive clicks.
   ========================================================= */

.ranking-entry {
  pointer-events: none;
}

.ranking-player {
  pointer-events: none;
}

.ranking-click-target {
  appearance: none;
  margin: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  pointer-events: auto;
}

.ranking-click-target:hover,
.ranking-click-target:focus-visible,
.ranking-click-target.is-selected {
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  outline: none;
}

/* =========================================================
   EACH ROW'S CLICKABLE RANK NUMBER
   ========================================================= */
.ranking-position {
  position: absolute;
  z-index: 5;
  left: var(--current-rank-left);
  top: var(--current-rank-top);
  width: var(--current-rank-width);
  padding: 0;
  border: 0;
  color: #ececec;
  font-size: var(--current-rank-text-size);
  font-weight: 950;
  line-height: 1;
  letter-spacing: -0.04em;
  text-align: center;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.85);
  white-space: nowrap;
}

/* The wrapper fills its row but never captures clicks. */
.ranking-player {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  min-width: 0;
  padding: 0;
}

/* =========================================================
   EACH ROW'S CLICKABLE AVATAR
   ========================================================= */
.ranking-avatar-control {
  position: absolute;
  z-index: 5;
  left: var(--current-avatar-left);
  top: var(--current-avatar-top);
  width: var(--current-avatar-size);
  height: var(--current-avatar-size);
  padding: 0;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.23);
  border-radius: 0 !important;
  clip-path: none !important;
  mask: none !important;
  -webkit-mask: none !important;
}

.ranking-avatar-control > img,
.ranking-avatar-control > .avatar-fallback {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 0 !important;
  clip-path: none !important;
  mask: none !important;
  -webkit-mask: none !important;
  object-fit: cover;
}

.ranking-avatar-control > .avatar-fallback {
  display: grid;
  place-items: center;
  background: #18191c;
  color: #dadada;
  font-size: clamp(0.68rem, 1vw, 0.9rem);
  font-weight: 900;
}

/* =========================================================
   EACH ROW'S CLICKABLE PLAYER NAME
   ========================================================= */
.ranking-name-control {
  position: absolute;
  z-index: 5;
  left: var(--current-name-left);
  top: var(--current-name-top);
  width: var(--current-name-width);
  min-width: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  text-align: left;
}

.ranking-name-control strong {
  display: block;
  width: 19ch;
  max-width: 19ch;
  overflow: hidden;
  color: #f4f4f4;
  font-size: var(--current-name-text-size);
  font-weight: 950;
  line-height: 1.05;
  letter-spacing: 0.045em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
  white-space: nowrap;
}

/* =========================================================
   EACH ROW'S CLICKABLE POINTS
   ========================================================= */
.ranking-score {
  position: absolute;
  z-index: 5;
  left: var(--current-points-left);
  top: var(--current-points-top);
  width: var(--current-points-width);
  padding: 0;
  border: 0;
  background: transparent;
  color: #f2f2f2 !important;
  font-size: var(--current-points-text-size);
  font-weight: 950;
  line-height: 1;
  letter-spacing: -0.025em;
  text-align: center;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.9);
  white-space: nowrap;
}

.ranking-chevron {
  display: none;
}

.ranking-pagination {
  position: absolute;
  z-index: 3;
  left: var(--lb-ranking-footer-left);
  right: var(--lb-ranking-footer-right);
  bottom: var(--lb-ranking-footer-bottom);
  height: var(--lb-ranking-footer-height);
  display: grid;
  grid-template-columns: 1fr 0.82fr 1fr;
  gap: 2.1%;
  align-items: stretch;
  margin: 0;
  padding: 0;
}

.ranking-page-button,
.ranking-page-status {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 0 0.55rem;
  border: 0;
  background: transparent;
  color: #d7d7d7;
  font-size: clamp(0.58rem, 1.1vw, 0.88rem);
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0.07em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.95);
}

a.ranking-page-button:hover,
a.ranking-page-button:focus-visible {
  color: #fff;
  outline: none;
  text-shadow:
    0 0 8px rgba(255, 255, 255, 0.25),
    0 2px 4px rgba(0, 0, 0, 0.95);
}

.ranking-page-button.is-disabled {
  color: rgba(215, 215, 215, 0.34);
  cursor: not-allowed;
}

/* =========================================================
   BREAKDOWN PANEL
   ========================================================= */

.breakdown-panel {
  min-width: 0;
  height: auto;
  min-height: 0;
  padding: 26px;
  overflow: hidden;
}

.player-detail-panel[hidden] {
  display: none;
}

.player-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.selected-player {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.selected-avatar {
  flex: 0 0 76px;
  width: 76px;
  height: 76px;
  border-color: rgba(209, 46, 34, 0.58);
}

.selected-player > span:last-child {
  min-width: 0;
}

.selected-player h2 {
  margin: 4px 0 5px;
  overflow: hidden;
  font-size: clamp(1.3rem, 2.1vw, 2rem);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selected-player b {
  color: var(--lb-red);
  font-size: 0.65rem;
  letter-spacing: 0.13em;
}

.selected-score {
  text-align: right;
}

.selected-score strong {
  display: block;
  margin: 2px 0 0;
  color: var(--lb-orange);
  font-size: clamp(2rem, 3.5vw, 3.3rem);
  line-height: 1;
}

.score-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.score-section {
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.11);
  background: rgba(255, 255, 255, 0.018);
}

.score-section > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 72px;
  padding: 13px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.score-section h3 {
  margin: 4px 0 0;
  font-size: 1rem;
  letter-spacing: 0.04em;
}

.score-section > header > strong {
  font-size: 1.32rem;
}

.score-earned > header {
  background: linear-gradient(90deg, rgba(87, 199, 104, 0.14), transparent);
  border-left: 4px solid var(--lb-green);
}

.score-earned > header > strong,
.score-earned .score-row em,
.summary-earned {
  color: var(--lb-green);
}

.score-lost > header {
  background: linear-gradient(90deg, rgba(255, 79, 71, 0.13), transparent);
  border-left: 4px solid var(--lb-danger);
}

.score-lost > header > strong,
.score-lost .score-row em,
.summary-lost {
  color: var(--lb-danger);
}

.score-columns,
.score-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px 92px;
  align-items: center;
  gap: 10px;
}

.score-columns {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.score-columns span:nth-child(2),
.score-columns span:nth-child(3) {
  text-align: right;
}

.score-rows {
  max-height: none;
  overflow: visible;
}

.score-row {
  min-height: 34px;
  padding: 5px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.065);
}

.score-row:last-child {
  border-bottom: 0;
}

.score-row > span {
  min-width: 0;
}

.score-row strong,
.score-row small {
  display: block;
}

.score-row strong {
  overflow: hidden;
  font-size: 0.82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.score-row small {
  margin-top: 4px;
  color: #747478;
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.score-row b,
.score-row em {
  justify-self: end;
  font-style: normal;
  font-size: 0.86rem;
}

.score-row b {
  color: #d3d3d3;
}

.score-row em {
  font-weight: 950;
}

.score-empty {
  margin: 0;
  padding: 28px 18px;
  color: var(--lb-muted);
  font-size: 0.8rem;
  text-align: center;
}

.score-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 0.75fr)) minmax(200px, 1fr);
  gap: 10px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.score-summary > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 58px;
  padding: 11px 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.025);
}

.score-summary strong {
  font-size: 1.05rem;
}

.score-summary-final {
  border-color: rgba(232, 121, 49, 0.4) !important;
  background: linear-gradient(90deg, rgba(232, 121, 49, 0.11), rgba(255, 255, 255, 0.02)) !important;
}

.score-summary-final strong {
  font-size: 1.28rem;
}

.leaderboard-info {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  min-height: 78px;
  padding: 16px 22px;
}

.leaderboard-info-copy {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
}

.leaderboard-info-copy > span {
  display: grid;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--lb-orange);
  font-weight: 950;
}

.leaderboard-info-copy p {
  margin: 0;
  color: var(--lb-muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

.scoring-rules {
  justify-self: end;
}

.scoring-rules[open] {
  grid-column: 1 / -1;
  width: 100%;
}

.scoring-rules[open] summary {
  margin-left: auto;
}

.scoring-rules summary {
  display: grid;
  min-width: 150px;
  min-height: 42px;
  padding: 0 17px;
  place-items: center;
  border: 1px solid rgba(209, 46, 34, 0.65);
  background: #111212;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 950;
  letter-spacing: 0.11em;
  list-style: none;
  cursor: pointer;
}

.scoring-rules summary::-webkit-details-marker {
  display: none;
}

.scoring-rules-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  width: 100%;
  max-height: 460px;
  margin-top: 12px;
  padding: 1px;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: #292a2a;
}

.scoring-rules-column {
  min-width: 0;
  background: #0c0d0d;
}

.scoring-rules-column + .scoring-rules-column {
  border-left: 1px solid rgba(255, 255, 255, 0.13);
}

.scoring-rules-column-title,
.scoring-rule-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
  min-height: 44px;
  padding: 9px 12px;
}

.scoring-rules-column-title {
  min-height: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.035);
}

.scoring-rules-positive .scoring-rules-column-title {
  box-shadow: inset 3px 0 0 rgba(140, 255, 0, 0.72);
}

.scoring-rules-negative .scoring-rules-column-title {
  box-shadow: inset 3px 0 0 rgba(255, 63, 53, 0.82);
}

.scoring-rule-row + .scoring-rule-row {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.scoring-rules-column-title span {
  color: #f1f1f1;
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.11em;
}

.scoring-rule-row span {
  min-width: 0;
  color: #d5d5d5;
  font-size: 0.73rem;
  font-weight: 750;
}

.scoring-rules-column-title strong,
.scoring-rule-row strong {
  flex: 0 0 auto;
  font-size: 0.75rem;
  white-space: nowrap;
}

.scoring-rules-positive .scoring-rules-column-title strong {
  color: #8cff00;
}

.scoring-rules-negative .scoring-rules-column-title strong {
  color: var(--lb-danger);
}

.leaderboard-empty {
  padding: 54px 24px;
  color: var(--lb-muted);
  font-weight: 750;
  text-align: center;
}

.is-positive {
  color: var(--lb-orange) !important;
}

.is-negative {
  color: var(--lb-danger) !important;
}

.is-zero {
  color: #aaa !important;
}

@media (max-width: 1180px) {
  :root {
    --lb-ranking-width: 440px;
  }
}

@media (max-width: 900px) {
  .leaderboard-page {
    background-attachment: scroll;
  }

  .leaderboard-main {
    grid-template-columns: 1fr;
  }

  .ranking-panel {
    width: min(100%, 620px);
  }

  .score-board {
    grid-template-columns: 1fr;
  }

  .breakdown-panel {
    scroll-margin-top: 20px;
  }
}

@media (max-width: 680px) {
  :root {
    --lb-page-pad-top: 38px;
    --lb-page-pad-side: 11px;
    --lb-page-pad-bottom: 74px;
    --lb-section-gap: 14px;
    --lb-main-gap: 14px;
  }

  .breakdown-panel,
  .leaderboard-info {
    padding: 18px 14px;
  }

  .ranking-entry {
    padding: 0;
  }

  .ranking-pagination {
    left: 7.9%;
    right: 7.9%;
  }

  .ranking-page-button,
  .ranking-page-status {
    padding-inline: 0.2rem;
    letter-spacing: 0.035em;
  }

  .player-detail-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .selected-score {
    width: 100%;
    text-align: left;
  }

  .score-columns,
  .score-row {
    grid-template-columns: minmax(0, 1fr) 58px 72px;
  }

  .score-summary {
    grid-template-columns: 1fr 1fr;
  }

  .score-summary-final {
    grid-column: 1 / -1;
  }

  .leaderboard-info {
    grid-template-columns: 1fr;
  }

  .scoring-rules summary {
    width: 100%;
  }

  .scoring-rules {
    justify-self: stretch;
  }

  .scoring-rules-panel {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .scoring-rules-column + .scoring-rules-column {
    border-top: 1px solid rgba(255, 255, 255, 0.13);
    border-left: 0;
  }
}

@media (max-width: 430px) {
  .ranking-player > img,
  .ranking-player > .avatar-fallback {
    display: none;
  }


  .selected-avatar {
    flex-basis: 62px;
    width: 62px;
    height: 62px;
  }

  .score-columns,
  .score-row {
    grid-template-columns: minmax(0, 1fr) 48px 64px;
    gap: 7px;
  }

  .score-row {
    padding-inline: 10px;
  }

  .score-row small {
    display: none;
  }
}

/* =========================================================
   FORCE ALL LEADERBOARD AVATARS SQUARE
   ========================================================= */
html body .leaderboard-page .ranking-player > img,
html body .leaderboard-page .ranking-player > .avatar-fallback,
html body .leaderboard-page .podium-avatar-wrap,
html body .leaderboard-page .podium-avatar-wrap > img,
html body .leaderboard-page .selected-avatar,
html body .leaderboard-page .selected-avatar > img {
  border-radius: 0 !important;
  clip-path: none !important;
  mask: none !important;
  -webkit-mask: none !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

/* =========================================================
   SELECTED SURVIVOR ARTWORK PANEL
   All live-overlay positions are controlled by the variables
   in SELECTED SURVIVOR OVERLAY CONFIG at the top of this file.
   ========================================================= */
.breakdown-panel {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-width: 0;
  height: calc(var(--lb-ranking-width) * var(--ss-panel-height-multiplier));
  min-height: 0;
  max-height: calc(var(--lb-ranking-width) * var(--ss-panel-height-multiplier));
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip-path: none;
  background: transparent;
  box-shadow: none;
}

.breakdown-panel::before,
.breakdown-panel::after {
  content: none;
}

.breakdown-panel-image {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}

.player-detail-panel[hidden] {
  display: none;
}

.player-detail-panel:not([hidden]) {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* ---------------------------------------------------------
   Header live data
   --------------------------------------------------------- */
.player-detail-header {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  pointer-events: none;
}

.selected-player {
  position: absolute;
  inset: 0;
  display: block;
  min-width: 0;
}

/* Square avatar controlled by --ss-avatar-* variables. */
.selected-avatar {
  position: absolute;
  top: var(--ss-avatar-top);
  left: var(--ss-avatar-left);
  display: grid;
  width: var(--ss-avatar-size);
  height: auto;
  aspect-ratio: 1 / 1;
  place-items: center;
  overflow: hidden;
  border: 0;
  border-radius: 0 !important;
  background: transparent;
  clip-path: none !important;
}

.selected-avatar img,
.selected-avatar .avatar-fallback {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 0 !important;
  clip-path: none !important;
  object-fit: cover;
}

.selected-player > span:last-child {
  position: static;
  min-width: 0;
}

/* These headings are printed into the artwork. */
.selected-player small,
.selected-score > span,
.selected-score > small {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.selected-player h2 {
  position: absolute;
  top: var(--ss-name-top);
  left: var(--ss-name-left);
  width: var(--ss-name-width);
  margin: 0;
  overflow: hidden;
  color: #f1f1ef;
  font-size: var(--ss-name-font-size);
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0.01em;
  text-overflow: ellipsis;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.95);
  white-space: nowrap;
}

/* Covers the fixed THIS WIPE artwork text, then prints the live scope once. */
.selected-player b {
  position: absolute;
  top: var(--ss-scope-top);
  left: var(--ss-scope-left);
  z-index: 4;
  display: flex;
  align-items: center;
  width: var(--ss-scope-width);
  height: var(--ss-scope-height);
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
  background: var(--ss-scope-cover);
  box-shadow: 0 0 7px 4px var(--ss-scope-cover);
  color: #ff4f47;
  font-size: var(--ss-scope-font-size);
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* The number is centred inside the empty middle of the artwork score box. */
.selected-score {
  position: absolute;
  top: var(--ss-final-score-top);
  right: var(--ss-final-score-right);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--ss-final-score-width);
  height: var(--ss-final-score-height);
  text-align: center;
}

.selected-score strong {
  display: block;
  width: 100%;
  margin: 0;
  color: var(--lb-orange);
  font-size: var(--ss-final-score-font-size);
  font-weight: 950;
  line-height: 1;
  letter-spacing: -0.035em;
  text-align: center;
  text-shadow: 0 2px 7px rgba(0, 0, 0, 0.95);
}

/* ---------------------------------------------------------
   Two live score tables
   --------------------------------------------------------- */
.score-board {
  position: absolute;
  top: var(--ss-board-top);
  right: var(--ss-board-right);
  bottom: var(--ss-board-bottom);
  left: var(--ss-board-left);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ss-board-gap);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.score-section {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
}

.score-section > header {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  left: 0;
  display: block;
  height: 11.30%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

/* Section headings are printed into the artwork. */
.score-section > header > div {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.score-section > header > strong {
  position: absolute;
  top: var(--ss-section-total-top);
  right: var(--ss-section-total-right);
  margin: 0;
  color: inherit;
  font-size: var(--ss-section-total-font-size);
  font-weight: 950;
  line-height: 1;
  transform: translateY(-50%);
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.95);
}

.score-earned > header,
.score-lost > header {
  border-left: 0;
  background: transparent;
}

.score-earned > header > strong,
.score-earned .score-row em,
.summary-earned {
  color: var(--lb-green);
}

.score-lost > header > strong,
.score-lost .score-row em,
.summary-lost {
  color: var(--lb-danger);
}

.score-columns {
  position: absolute;
  z-index: 2;
  top: var(--ss-columns-top);
  right: var(--ss-columns-side);
  left: var(--ss-columns-side);
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--ss-count-column-width) var(--ss-points-column-width);
  align-items: center;
  gap: var(--ss-column-gap);
  height: var(--ss-columns-height);
  min-height: 0;
  margin: 0;
  padding: 0 5px;
  border: 0;
  color: #9b9b9f;
  font-size: clamp(0.48rem, 0.58vw, 0.60rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.score-columns span:nth-child(2),
.score-columns span:nth-child(3) {
  text-align: right;
}

.score-rows {
  position: absolute;
  z-index: 2;
  top: var(--ss-rows-top);
  right: var(--ss-rows-side);
  bottom: var(--ss-rows-bottom);
  left: var(--ss-rows-side);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: calc(100% / var(--ss-visible-row-slots));
  align-content: start;
  min-width: 0;
  min-height: 0;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.score-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--ss-count-column-width) var(--ss-points-column-width);
  align-items: center;
  gap: var(--ss-column-gap);
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0 5px;
  overflow: hidden;
  border: 0;
  background: transparent;
  line-height: 0.95;
}

.score-row > span {
  min-width: 0;
}

.score-row strong {
  display: block;
  overflow: hidden;
  color: #f0f0ee;
  font-size: var(--ss-row-name-size);
  font-weight: 900;
  line-height: 0.95;
  text-overflow: ellipsis;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.95);
  white-space: nowrap;
}

.score-row small {
  display: none;
}

.score-row b,
.score-row em {
  justify-self: end;
  margin: 0;
  font-style: normal;
  font-size: var(--ss-row-value-size);
  font-weight: 950;
  line-height: 0.95;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.95);
}

.score-row b {
  color: #f0f0ee;
}

.score-empty {
  position: absolute;
  inset: 0;
  display: grid;
  margin: 0;
  padding: 0 16px;
  place-items: center;
  color: var(--lb-muted);
  font-size: 0.78rem;
  text-align: center;
}

/* ---------------------------------------------------------
   Bottom live totals
   --------------------------------------------------------- */
.score-summary {
  position: absolute;
  right: var(--ss-footer-right);
  bottom: var(--ss-footer-bottom);
  left: var(--ss-footer-left);
  display: grid;
  grid-template-columns: 1fr 1fr 1.08fr;
  gap: var(--ss-footer-gap);
  height: var(--ss-footer-height);
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.score-summary > div {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

/* Footer labels are printed into the artwork. */
.score-summary span:not(.visually-hidden) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.score-summary strong {
  position: absolute;
  top: var(--ss-footer-value-top);
  margin: 0;
  font-size: var(--ss-footer-value-size);
  font-weight: 950;
  line-height: 1;
  transform: translateY(-50%);
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.95);
  white-space: nowrap;
}

.score-summary > div:nth-child(1) strong {
  right: var(--ss-total-earned-right);
}

.score-summary > div:nth-child(2) strong {
  right: var(--ss-total-lost-right);
}

.score-summary-final {
  border: 0 !important;
  background: transparent !important;
}

.score-summary-final strong {
  right: var(--ss-total-final-right);
  color: var(--lb-orange) !important;
  font-size: var(--ss-footer-final-size);
}

/* ---------------------------------------------------------
   Responsive scaling
   --------------------------------------------------------- */
@media (max-width: 1180px) and (min-width: 901px) {
  .breakdown-panel {
    height: calc(var(--lb-ranking-width) * var(--ss-panel-height-multiplier));
    max-height: calc(var(--lb-ranking-width) * var(--ss-panel-height-multiplier));
  }

  .score-columns,
  .score-row {
    --ss-count-column-width: 42px;
    --ss-points-column-width: 54px;
    --ss-column-gap: 5px;
  }
}

@media (max-width: 900px) {
  .breakdown-panel {
    width: min(100%, 620px);
    height: auto;
    max-height: none;
    aspect-ratio: 896 / 1728;
    margin-inline: auto;
  }

  .score-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .breakdown-panel {
    padding: 0;
  }

  .score-columns,
  .score-row {
    --ss-count-column-width: 31px;
    --ss-points-column-width: 39px;
    --ss-column-gap: 3px;
  }

  .score-columns {
    font-size: 0.38rem;
    letter-spacing: 0.06em;
  }

  .score-row strong,
  .score-row b,
  .score-row em {
    font-size: clamp(0.40rem, 1.55vw, 0.56rem);
  }

  .selected-player b {
    font-size: 0.43rem;
  }
}