/*
|--------------------------------------------------------------------------
| BARELY ALIVE RUST — LEADERBOARD MOBILE LAYOUT
|--------------------------------------------------------------------------
|
| Load this file AFTER:
| 1. rust.css
| 2. leaderboard.css
| 3. rust-mobile.css
|
| Applies only to screens 760px wide and below.
|
| Mobile does not use these desktop panel images:
| - leaderboard-toolbar-panel.webp
| - leaderboard-top-survivors-panel.webp
| - leaderboard-panel.webp
| - selected-survivor-panel.webp
|
*/

@media (max-width: 760px) {

  /* =========================================================
     MOBILE PAGE
     ========================================================= */

  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .leaderboard-page {
    min-height: calc(100vh - 74px);
    padding: 28px 0 64px;

    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 / auto 520px
      no-repeat;

    background-attachment: scroll;
  }

  .leaderboard-shell {
    width: calc(100% - 24px);
    max-width: 560px;
    margin-inline: auto;
  }

  .lb-frame {
    clip-path: none;
    border-radius: 16px;
  }


  /* =========================================================
     REMOVE ALL DESKTOP LEADERBOARD PANEL IMAGES
     ========================================================= */

  .leaderboard-toolbar-image,
  .top-survivors-panel-image,
  .ranking-panel-image,
  .breakdown-panel-image {
    display: none !important;
  }


  /* =========================================================
     MOBILE CONTROL PANEL
     ========================================================= */

  .leaderboard-control-panel {
    position: relative;

    width: 100%;
    max-width: none;
    min-width: 0;
    height: auto;

    margin: 0 auto 16px;
    padding: 20px 14px 16px;

    display: block;
    overflow: hidden;

    background:
      linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.032),
        rgba(255, 255, 255, 0.008)
      ),
      #090a0a;

    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 16px;

    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.04),
      0 16px 34px rgba(0, 0, 0, 0.38);

    text-align: center;
  }

  .leaderboard-control-panel::before {
    content: "";

    position: absolute;
    top: -1px;
    left: 14%;
    right: 14%;

    height: 1px;

    background:
      linear-gradient(
        90deg,
        transparent,
        rgba(209, 46, 34, 0.88),
        transparent
      );

    box-shadow: 0 0 10px rgba(209, 46, 34, 0.22);
    pointer-events: none;
  }

  .leaderboard-brand {
    position: relative;
    top: auto;
    left: auto;

    width: 100%;
    min-width: 0;

    margin: 0 auto 18px;

    transform: none;

    text-align: center;
  }

  .leaderboard-brand p {
    font-size: 0.68rem;
    line-height: 1.3;
    letter-spacing: 0.12em;
    text-align: center;
    white-space: normal;
  }

  .leaderboard-brand h1 {
    margin-top: 7px;

    font-size: clamp(1.75rem, 9vw, 2.55rem);
    line-height: 1;
    letter-spacing: 0.12em;
    text-align: center;
    white-space: normal;
  }

  .leaderboard-brand > span {
    display: block;

    margin-top: 8px;

    color: var(--lb-muted);
    font-size: 0.57rem;
    font-weight: 900;
    letter-spacing: 0.13em;
    text-align: center;
    text-transform: uppercase;
  }

  .leaderboard-controls {
    position: relative;
    top: auto;
    left: auto;
    right: auto;

    width: 100%;
    min-width: 0;

    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;

    transform: none;
  }

  .server-control {
    width: 100%;
    min-width: 0;

    display: grid;
    justify-items: center;
    gap: 7px;

    text-align: center;
  }

  .server-control > span {
    text-align: center;
  }

  .server-control select {
    width: 100%;
    min-width: 0;
    height: 48px;
    padding: 0 38px 0 13px;

    border-radius: 4px;

    font-size: 0.72rem;
    text-align: center;
    text-align-last: center;
  }

  .scope-switch {
    width: 100%;
    height: 48px;

    border-radius: 4px;
    overflow: hidden;
  }

  .scope-switch a {
    padding: 0 8px;

    font-size: 0.67rem;
    letter-spacing: 0.07em;
    text-align: center;
  }


  /* =========================================================
     MOBILE TOP THREE
     ========================================================= */

  .top-survivors {
    position: relative;

    width: 100%;
    max-width: none;
    min-width: 0;
    height: auto;

    margin: 0 auto 16px;
    padding: 17px 10px 14px;

    display: block;
    overflow: hidden;

    background:
      linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.028),
        rgba(255, 255, 255, 0.007)
      ),
      #090a0a;

    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 16px;

    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.035),
      0 16px 34px rgba(0, 0, 0, 0.34);
  }

  .top-survivors::before {
    content: "TOP SURVIVORS";

    display: block;

    margin: 0 auto 15px;

    color: #f1f1ef;
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.17em;
    text-align: center;
  }

  .podium {
    position: relative;
    inset: auto;

    width: 100%;

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
    gap: 7px;
  }

  .podium-player,
  .podium-player.rank-1,
  .podium-player.rank-2,
  .podium-player.rank-3 {
    position: relative;
    top: auto;
    left: auto;
    right: auto;

    width: 100%;
    height: auto;
    min-width: 0;
    min-height: 138px;
    padding: 10px 4px 9px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;

    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 11px;

    background: rgba(255, 255, 255, 0.018);

    text-align: center;
  }

  .podium-player::before {
    display: grid;

    width: 28px;
    height: 24px;

    place-items: center;

    border: 1px solid currentColor;
    border-radius: 4px;

    font-size: 0.68rem;
    font-weight: 950;
    line-height: 1;
  }

  .podium-player.rank-1 {
    min-height: 154px;

    border-color: rgba(232, 180, 61, 0.54);
    background:
      linear-gradient(
        180deg,
        rgba(232, 180, 61, 0.10),
        rgba(255, 255, 255, 0.018)
      );
  }

  .podium-player.rank-1::before {
    content: "#1";
    color: #e8b43d;
  }

  .podium-player.rank-2 {
    border-color: rgba(198, 203, 211, 0.44);
  }

  .podium-player.rank-2::before {
    content: "#2";
    color: #c6cbd3;
  }

  .podium-player.rank-3 {
    border-color: rgba(184, 110, 64, 0.48);
  }

  .podium-player.rank-3::before {
    content: "#3";
    color: #b86e40;
  }

  .podium-player.is-selected {
    box-shadow:
      inset 0 0 0 1px rgba(209, 46, 34, 0.88),
      0 0 16px rgba(209, 46, 34, 0.14);
  }

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

  .podium-avatar-wrap,
  .rank-1 .podium-avatar-wrap {
    width: 62px;
    height: 62px;

    border-radius: 0;
  }

  .rank-1 .podium-avatar-wrap {
    width: 74px;
    height: 74px;
  }

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

    text-align: center;
  }

  .podium-copy strong {
    width: 100%;

    font-size: 0.66rem;
    line-height: 1.2;
    letter-spacing: 0.025em;
    text-align: center;
  }

  .podium-copy b {
    margin-top: 5px;

    font-size: 1.05rem;
    line-height: 1;
    text-align: center;
  }


  /* =========================================================
     MOBILE MAIN LAYOUT
     ========================================================= */

  .leaderboard-main {
    width: 100%;

    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;

    margin-bottom: 16px;
  }


  /* =========================================================
     MOBILE RANKINGS
     CSS list — no leaderboard-panel.webp
     ========================================================= */

  .ranking-panel {
    position: relative;

    width: 100%;
    max-width: none;
    min-width: 0;
    height: auto;
    min-height: 0;
    aspect-ratio: auto;

    margin: 0;
    padding: 12px;

    overflow: hidden;

    background:
      linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.028),
        rgba(255, 255, 255, 0.007)
      ),
      #090a0a;

    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 16px;

    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.035),
      0 16px 34px rgba(0, 0, 0, 0.34);
  }

  .ranking-panel::before {
    content: "PLAYER RANKINGS";

    display: block;

    margin: 3px auto 12px;

    color: #f1f1ef;
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.17em;
    text-align: center;
  }

  .ranking-list {
    position: relative;
    top: auto;
    left: auto;
    right: auto;

    width: 100%;
    height: auto;

    display: grid;
    grid-template-rows: none;
    grid-auto-rows: auto;
    gap: 8px;

    margin: 0;
    padding: 0;

    overflow: visible;
  }

  .ranking-entry {
    position: relative;

    width: 100%;
    height: auto;
    min-width: 0;
    min-height: 64px;
    margin: 0;
    padding: 8px;

    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 68px;
    align-items: center;
    gap: 8px;

    overflow: hidden;

    background: rgba(255, 255, 255, 0.018);
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 10px;

    pointer-events: auto;

    text-align: center;
  }

  .ranking-entry.is-selected {
    background:
      linear-gradient(
        90deg,
        rgba(209, 46, 34, 0.13),
        rgba(255, 255, 255, 0.018)
      ) !important;

    border-color: rgba(209, 46, 34, 0.52);

    box-shadow:
      inset 3px 0 0 var(--lb-red) !important;
  }

  .ranking-entry:hover {
    background: rgba(255, 255, 255, 0.03) !important;
  }

  .ranking-position {
    position: relative;
    left: auto;
    top: auto;
    z-index: 2;

    grid-column: 1;

    width: 100%;
    min-width: 0;
    padding: 0;

    font-size: 0.92rem;
    line-height: 1;
    text-align: center;
  }

  .ranking-player {
    position: relative;
    inset: auto;
    z-index: 2;

    grid-column: 2;

    min-width: 0;

    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: center;
    gap: 9px;

    pointer-events: auto;
  }

  .ranking-avatar-control {
    position: relative;
    left: auto;
    top: auto;
    z-index: 2;

    width: 46px;
    height: 46px;
    padding: 0;

    justify-self: center;

    border: 1px solid rgba(255, 255, 255, 0.20);
  }

  .ranking-name-control {
    position: relative;
    left: auto;
    top: auto;
    z-index: 2;

    width: 100%;
    min-width: 0;
    padding: 0;

    overflow: hidden;

    text-align: center;
  }

  .ranking-name-control strong {
    display: block;

    width: 100%;
    max-width: 100%;

    overflow: hidden;

    font-size: 0.70rem;
    line-height: 1.2;
    letter-spacing: 0.035em;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ranking-score {
    position: relative;
    left: auto;
    top: auto;
    z-index: 2;

    grid-column: 3;

    width: 100%;
    min-width: 0;
    padding: 0;

    font-size: 1rem;
    line-height: 1;
    text-align: center;
  }

  .ranking-pagination {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;

    width: 100%;
    height: auto;
    min-height: 46px;

    margin: 12px 0 0;
    padding: 0;

    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
    gap: 7px;
  }

  .ranking-page-button,
  .ranking-page-status {
    width: 100%;
    height: auto;
    min-height: 46px;
    padding: 0 8px;

    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 5px;

    background: rgba(255, 255, 255, 0.018);

    font-size: 0.58rem;
    line-height: 1.2;
    letter-spacing: 0.05em;
    text-align: center;
    text-shadow: none;
  }

  a.ranking-page-button {
    border-color: rgba(209, 46, 34, 0.48);
  }

  .ranking-page-button.is-disabled {
    opacity: 0.42;
  }


  /* =========================================================
     MOBILE SELECTED SURVIVOR
     CSS panel — no selected-survivor-panel.webp
     ========================================================= */

  .breakdown-panel {
    position: relative;

    width: 100%;
    max-width: none;
    min-width: 0;
    height: auto;
    min-height: 0;
    max-height: none;
    aspect-ratio: auto;

    margin: 0;
    padding: 14px;

    overflow: hidden;

    background:
      linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.028),
        rgba(255, 255, 255, 0.007)
      ),
      #090a0a;

    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 16px;

    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.035),
      0 16px 34px rgba(0, 0, 0, 0.34);

    scroll-margin-top: 18px;
  }

  .player-detail-panel:not([hidden]) {
    position: relative;
    inset: auto;

    width: 100%;
    height: auto;
    min-width: 0;
    min-height: 0;

    display: block;

    margin: 0;
    padding: 0;

    overflow: visible;
  }

  .player-detail-header {
    position: relative;
    inset: auto;

    width: 100%;
    height: auto;
    min-height: 0;

    margin: 0 0 13px;
    padding: 3px 0 14px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 13px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.09);

    pointer-events: auto;

    text-align: center;
  }

  .selected-player {
    position: relative;
    inset: auto;

    width: 100%;
    min-width: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;

    text-align: center;
  }

  .selected-avatar {
    position: relative;
    top: auto;
    left: auto;

    width: 72px;
    height: 72px;
    aspect-ratio: 1;

    margin: 0 auto;

    border: 2px solid rgba(209, 46, 34, 0.58);
    background: #101111;
  }

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

    display: grid;
    justify-items: center;
    gap: 5px;

    text-align: center;
  }

  .leaderboard-page .selected-player small,
  .leaderboard-page .selected-score > span,
  .leaderboard-page .selected-score > small,
  .leaderboard-page .score-section > header > div,
  .leaderboard-page .score-summary span:not(.visually-hidden) {
    position: static !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;

    clip: auto !important;
    clip-path: none !important;

    white-space: normal !important;
  }

  .selected-player h2 {
    position: relative;
    top: auto;
    left: auto;

    width: 100%;
    max-width: 100%;

    margin: 0;

    overflow: hidden;

    font-size: clamp(1.25rem, 7vw, 1.85rem);
    line-height: 1.05;
    letter-spacing: 0.02em;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .selected-player b {
    position: relative;
    top: auto;
    left: auto;
    z-index: 1;

    width: auto;
    height: auto;
    min-width: 0;

    display: block;

    margin: 0;
    padding: 0;

    overflow: visible;

    background: transparent;
    box-shadow: none;

    font-size: 0.58rem;
    line-height: 1.3;
    letter-spacing: 0.12em;
    text-align: center;
    white-space: normal;
  }

  .selected-score {
    position: relative;
    top: auto;
    right: auto;

    width: min(100%, 250px);
    height: auto;
    min-height: 88px;

    margin: 0 auto;
    padding: 11px 14px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;

    background:
      linear-gradient(
        180deg,
        rgba(232, 121, 49, 0.11),
        rgba(255, 255, 255, 0.018)
      );

    border: 1px solid rgba(232, 121, 49, 0.32);
    border-radius: 10px;

    text-align: center;
  }

  .selected-score span,
  .selected-score small {
    color: var(--lb-muted);
    font-size: 0.54rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-align: center;
    text-transform: uppercase;
  }

  .selected-score strong {
    width: 100%;

    margin: 1px 0;

    font-size: clamp(2rem, 12vw, 3rem);
    line-height: 0.9;
    text-align: center;
  }


  /* =========================================================
     MOBILE EARNED / LOST SECTIONS
     ========================================================= */

  .score-board {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;

    width: 100%;
    min-width: 0;
    min-height: 0;

    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;

    overflow: visible;
  }

  .score-section {
    position: relative;

    width: 100%;
    min-width: 0;
    min-height: 0;

    display: block;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 11px;

    background: rgba(255, 255, 255, 0.015);
  }

  .score-section > header {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    z-index: 2;

    width: 100%;
    height: auto;
    min-height: 70px;

    margin: 0;
    padding: 12px 13px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  }

  .score-section > header > div {
    display: block;

    text-align: left;
  }

  .score-section > header span {
    font-size: 0.52rem;
    line-height: 1.25;
    letter-spacing: 0.10em;
  }

  .score-section h3 {
    margin: 4px 0 0;

    font-size: 0.90rem;
    line-height: 1.1;
    letter-spacing: 0.035em;
  }

  .score-section > header > strong {
    position: relative;
    top: auto;
    right: auto;

    flex: 0 0 auto;

    margin: 0;

    font-size: 1.15rem;

    transform: none;
    text-shadow: none;
  }

  .score-earned > header {
    background:
      linear-gradient(
        90deg,
        rgba(87, 199, 104, 0.13),
        transparent
      );

    border-left: 4px solid var(--lb-green);
  }

  .score-lost > header {
    background:
      linear-gradient(
        90deg,
        rgba(255, 79, 71, 0.12),
        transparent
      );

    border-left: 4px solid var(--lb-danger);
  }

  .score-columns {
    position: relative;
    top: auto;
    right: auto;
    left: auto;

    width: 100%;
    height: auto;
    min-height: 34px;

    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px 62px;
    align-items: center;
    gap: 6px;

    margin: 0;
    padding: 8px 10px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.075);

    font-size: 0.46rem;
    line-height: 1.2;
    letter-spacing: 0.07em;
    text-align: center;
  }

  .score-columns span {
    text-align: center !important;
  }

  .score-rows {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;

    width: 100%;
    min-width: 0;
    min-height: 0;
    max-height: none;

    display: block;

    margin: 0;
    padding: 0;

    overflow: visible;
  }

  .score-row {
    width: 100%;
    min-width: 0;
    min-height: 48px;

    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px 62px;
    align-items: center;
    gap: 6px;

    margin: 0;
    padding: 7px 10px;

    overflow: hidden;

    border-bottom: 1px solid rgba(255, 255, 255, 0.06);

    line-height: 1.15;
    text-align: center;
  }

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

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

    text-align: center;
  }

  .score-row strong {
    width: 100%;

    overflow: hidden;

    font-size: 0.67rem;
    line-height: 1.15;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .score-row small {
    display: block;

    margin-top: 3px;

    color: #77777c;
    font-size: 0.46rem;
    line-height: 1.2;
    letter-spacing: 0.05em;
    text-align: center;
  }

  .score-row b,
  .score-row em {
    justify-self: center;

    margin: 0;

    font-size: 0.72rem;
    line-height: 1;
    text-align: center;
    text-shadow: none;
  }

  .score-empty {
    position: relative;
    inset: auto;

    min-height: 84px;

    display: grid;

    margin: 0;
    padding: 18px 12px;

    place-items: center;

    font-size: 0.70rem;
    text-align: center;
  }


  /* =========================================================
     MOBILE SCORE SUMMARY
     ========================================================= */

  .score-summary {
    position: relative;
    right: auto;
    bottom: auto;
    left: auto;

    width: 100%;
    height: auto;
    min-height: 0;

    margin: 12px 0 0;
    padding: 12px 0 0;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;

    border-top: 1px solid rgba(255, 255, 255, 0.09);
  }

  .score-summary > div {
    position: relative;

    min-width: 0;
    min-height: 68px;

    margin: 0;
    padding: 10px 7px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;

    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 9px;

    background: rgba(255, 255, 255, 0.018);

    text-align: center;
  }

  .score-summary span:not(.visually-hidden) {
    color: var(--lb-muted);
    font-size: 0.48rem;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: 0.09em;
    text-align: center;
    text-transform: uppercase;
  }

  .score-summary strong {
    position: relative;
    top: auto;
    right: auto !important;

    margin: 0;

    font-size: 0.95rem;
    line-height: 1;
    text-align: center;

    transform: none;
    text-shadow: none;
  }

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

    min-height: 78px !important;

    border-color: rgba(232, 121, 49, 0.35) !important;

    background:
      linear-gradient(
        90deg,
        rgba(232, 121, 49, 0.10),
        rgba(255, 255, 255, 0.018)
      ) !important;
  }

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


  /* =========================================================
     MOBILE INFORMATION / RULES
     ========================================================= */

  .leaderboard-info {
    width: 100%;
    min-width: 0;
    min-height: 0;
    padding: 15px 12px;

    display: grid;
    grid-template-columns: 1fr;
    gap: 13px;

    border-radius: 14px;

    text-align: center;
  }

  .leaderboard-info-copy {
    width: 100%;
    min-width: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;

    text-align: center;
  }

  .leaderboard-info-copy > span {
    flex: 0 0 30px;

    margin: 0 auto;
  }

  .leaderboard-info-copy p {
    width: 100%;

    font-size: 0.70rem;
    line-height: 1.55;
    text-align: center;
  }

  .scoring-rules,
  .scoring-rules[open] {
    grid-column: auto;
    justify-self: stretch;

    width: 100%;
  }

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

  .scoring-rules summary {
    width: 100%;
    min-width: 0;
    min-height: 46px;

    border-radius: 5px;

    text-align: center;
  }

  .scoring-rules-panel {
    width: 100%;
    max-height: 420px;

    margin-top: 10px;

    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;

    overflow-x: hidden;
    overflow-y: auto;
  }

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

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

  .scoring-rules-column-title,
  .scoring-rule-row {
    min-width: 0;
    min-height: 46px;
    padding: 9px 10px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    text-align: left;
  }

  .scoring-rules-column-title span,
  .scoring-rule-row span {
    min-width: 0;

    font-size: 0.67rem;
    line-height: 1.3;
  }

  .scoring-rules-column-title strong,
  .scoring-rule-row strong {
    flex: 0 0 auto;

    font-size: 0.68rem;
  }

  .leaderboard-empty {
    width: 100%;
    padding: 38px 18px;

    border-radius: 14px;

    text-align: center;
  }
}


/* =========================================================
   SMALL MOBILE ADJUSTMENTS
   ========================================================= */

@media (max-width: 420px) {

  .leaderboard-shell {
    width: calc(100% - 20px);
  }

  .leaderboard-page {
    padding-top: 24px;
  }

  .leaderboard-control-panel {
    padding-inline: 11px;
  }

  .leaderboard-brand h1 {
    font-size: 1.72rem;
    letter-spacing: 0.09em;
  }

  .podium {
    gap: 5px;
  }

  .podium-player,
  .podium-player.rank-1,
  .podium-player.rank-2,
  .podium-player.rank-3 {
    min-height: 131px;
    padding-inline: 2px;
  }

  .podium-player.rank-1 {
    min-height: 145px;
  }

  .podium-avatar-wrap,
  .rank-1 .podium-avatar-wrap {
    width: 54px;
    height: 54px;
  }

  .rank-1 .podium-avatar-wrap {
    width: 64px;
    height: 64px;
  }

  .podium-copy strong {
    font-size: 0.58rem;
  }

  .podium-copy b {
    font-size: 0.92rem;
  }

  .ranking-panel,
  .breakdown-panel {
    padding: 10px;
  }

  .ranking-entry {
    min-height: 60px;
    padding: 7px 6px;

    grid-template-columns: 36px minmax(0, 1fr) 58px;
    gap: 6px;
  }

  .ranking-player {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 7px;
  }

  .ranking-avatar-control {
    width: 40px;
    height: 40px;
  }

  .ranking-position {
    font-size: 0.78rem;
  }

  .ranking-name-control strong {
    font-size: 0.62rem;
  }

  .ranking-score {
    font-size: 0.86rem;
  }

  .ranking-pagination {
    grid-template-columns: 1fr 1fr;
  }

  .ranking-page-status {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .ranking-page-button {
    grid-row: 2;
  }

  .selected-avatar {
    width: 64px;
    height: 64px;
  }

  .selected-player h2 {
    font-size: 1.25rem;
  }

  .selected-score {
    min-height: 80px;
  }

  .score-columns,
  .score-row {
    grid-template-columns: minmax(0, 1fr) 40px 54px;
    gap: 4px;
    padding-inline: 7px;
  }

  .score-columns {
    font-size: 0.40rem;
  }

  .score-row strong {
    font-size: 0.60rem;
  }

  .score-row small {
    font-size: 0.40rem;
  }

  .score-row b,
  .score-row em {
    font-size: 0.64rem;
  }

  .score-summary > div {
    min-height: 64px;
  }
}