.leaderboard-page {             min-height: 100vh;             background: linear-gradient(135deg, #1e1e2e 0%, #2C2C34 100%);             color: #DDDCC5;             padding: 20px;         }          .leaderboard-container {             max-width: 1200px;             margin: 0 auto;             background: rgba(13, 13, 13, 0.95);             border: 2px solid rgba(77, 87, 102, 0.5);             border-radius: 20px;             padding: 30px;             backdrop-filter: blur(10px);             box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);         }          .leaderboard-header {             text-align: center;             margin-bottom: 30px;         }          .leaderboard-header h1 {             font-size: 36px;             margin: 0 0 10px;             color: #E94B3C;             text-shadow: 0 0 20px rgba(233, 75, 60, 0.5);         }          .leaderboard-header p {             font-size: 16px;             color: #AAA;             margin: 0;         }          .leaderboard-table {             width: 100%;             border-collapse: collapse;             margin-top: 20px;         }          .leaderboard-table thead th {             background: rgba(233, 75, 60, 0.1);             border: 1px solid rgba(233, 75, 60, 0.3);             padding: 14px;             text-align: left;             font-weight: 700;             color: #E94B3C;         }          .leaderboard-table tbody td {             border: 1px solid rgba(77, 87, 102, 0.5);             padding: 14px;             vertical-align: middle;         }          .leaderboard-table tbody tr {             transition: background-color 0.2s;         }          .leaderboard-table tbody tr:hover {             background: rgba(233, 75, 60, 0.05);         }          .leaderboard-rank {             font-weight: 700;             color: #E94B3C;             text-align: center;             width: 50px;         }          .leaderboard-rank.top-3 {             font-size: 20px;         }          .leaderboard-player {             display: flex;             align-items: center;             gap: 12px;             cursor: pointer;         }          .leaderboard-player:hover {             text-decoration: underline;         }          .leaderboard-avatar {             width: 40px;             height: 40px;             border-radius: 50%;             background: #111219;             display: flex;             align-items: center;             justify-content: center;             flex-shrink: 0;             overflow: hidden;         }          .leaderboard-avatar img {             width: 100%;             height: 100%;             object-fit: cover;         }          .leaderboard-avatar-initial {             font-weight: 700;             color: #f2f2f4;             font-size: 18px;         }          .leaderboard-username {             font-weight: 600;         }          .leaderboard-elo {             text-align: center;             font-weight: 600;             color: #dcb352;         }          .leaderboard-rank-badge {             text-align: center;             display: inline-block;             padding: 4px 12px;             background: rgba(31, 185, 143, 0.15);             border: 1px solid rgba(31, 185, 143, 0.4);             border-radius: 20px;             color: #1fb98f;             font-weight: 600;             font-size: 12px;         }          .leaderboard-stats {             text-align: center;             font-size: 13px;         }          .leaderboard-loading {             text-align: center;             padding: 40px;             color: #AAA;         }          .leaderboard-empty {             text-align: center;             padding: 60px 20px;             color: #AAA;         }          .leaderboard-back-btn {             display: inline-block;             margin: 20px 0;             padding: 10px 20px;             background: rgba(77, 87, 102, 0.5);             border: 1px solid rgba(77, 87, 102, 0.8);             border-radius: 8px;             color: #DDDCC5;             text-decoration: none;             cursor: pointer;             transition: all 0.2s;         }          .leaderboard-back-btn:hover {             background: rgba(77, 87, 102, 0.7);             border-color: rgba(77, 87, 102, 1);         }          @media (max-width: 768px) {             .leaderboard-container {                 padding: 20px;             }              .leaderboard-header h1 {                 font-size: 28px;             }              .leaderboard-table thead th,             .leaderboard-table tbody td {                 padding: 10px;                 font-size: 12px;             }              .leaderboard-avatar {                 width: 32px;                 height: 32px;             }              .leaderboard-avatar-initial {                 font-size: 14px;             }         }
@media (max-width: 900px) {
    .leaderboard-page {
        padding: 3%;
    }

    .leaderboard-container {
        width: 96%;
        max-width: none;
        padding: 3%;
    }

    .leaderboard-table {
        display: block;
        width: 100%;
        overflow-x: auto;
    }
}


/* ── Responsive: 1920×1080 / 15.6" ── */
@media (max-width: 1400px) {
    .leaderboard-container { padding: 22px; }
    .leaderboard-header h1 { font-size: 28px; }
    .leaderboard-table thead th,
    .leaderboard-table tbody td { padding: 10px 12px; font-size: 13px; }
}
@media (max-width: 1100px) {
    .leaderboard-page { padding: 14px; }
    .leaderboard-container { padding: 16px; }
}

/* Global responsive baseline */
html {
    font-size: clamp(14px, 0.24vw + 12.9px, 18px);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

img,
svg,
video,
canvas {
    max-width: 100%;
    height: auto;
}

button,
input,
select,
textarea {
    font: inherit;
}

.leaderboard-table {
    table-layout: auto;
}

/* Global chat-style typography override */
:root {
    --global-chat-font: 'JetBrains Mono', monospace;
}

html,
body,
body * {
    font-family: var(--global-chat-font) !important;
}