* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  }

:root {
--background: #d20a2e;
--background-dark: #570914;


--surface: #11151b;
--surface-hover: #181d24;
--surface-light: #1c222a;

--border: rgba(255, 255, 255, 0.1);

--text: #ffffff;
--muted: #c1c6ce;
--muted-dark: #9299a4;

--green: #39ff88;

--gold: #f5c542;
--silver: #bfc5cc;
--bronze: #c9824b;


}

html {
scroll-behavior: smooth;
}

body {
min-height: 100vh;


background:
    radial-gradient(
        circle at top center,
        rgba(255, 255, 255, 0.08),
        transparent 35%
    ),
    linear-gradient(
        135deg,
        var(--background),
        var(--background-dark)
    );

color: var(--text);

font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;


}

/* ============================================================
Header
============================================================ */

.site-header {
position: sticky;
top: 0;
z-index: 100;


width: 100%;

background: rgba(17, 21, 27, 0.94);

border-bottom: 1px solid var(--border);

backdrop-filter: blur(16px);


}

.site-header-inner {
width: min(1200px, calc(100% - 40px));


min-height: 70px;

margin: 0 auto;

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

gap: 20px;


}

.site-logo {
display: flex;
align-items: center;


gap: 11px;

color: var(--text);
text-decoration: none;


}

.site-logo-image {
width: 36px;
height: 36px;


border-radius: 9px;

object-fit: cover;


}

.site-logo-text {
font-size: 18px;
font-weight: 700;
}

.site-nav {
display: flex;
align-items: center;


gap: 8px;


}

.site-nav-link {
display: flex;
align-items: center;


gap: 8px;

padding: 10px 13px;

border-radius: 9px;

color: var(--muted);

text-decoration: none;

font-size: 14px;
font-weight: 600;

transition:
    background 0.18s ease,
    color 0.18s ease;


}

.site-nav-link:hover {
background: rgba(255, 255, 255, 0.06);
color: var(--text);
}

.site-nav-link i {
font-size: 14px;
}

.site-nav-discord:hover {
color: #7289da;
}

/* ============================================================
Container
============================================================ */

.container {
width: min(1200px, calc(100% - 40px));


margin: 0 auto;

padding: 50px 0 80px;


}

/* ============================================================
Page Header
============================================================ */

.page-header {
display: flex;
align-items: flex-end;
justify-content: space-between;


gap: 20px;

margin-bottom: 28px;


}

.page-header h1 {
font-size: 34px;
line-height: 1.1;


font-weight: 800;
letter-spacing: -0.8px;


}

.page-header p {
margin-top: 8px;


color: var(--muted);

font-size: 15px;


}

.item-count {
color: var(--muted);


font-size: 14px;
font-weight: 600;

white-space: nowrap;


}

/* ============================================================
Toolbar
============================================================ */

.toolbar {
display: flex;
align-items: center;


gap: 12px;

margin-bottom: 28px;


}

.search-wrapper {
position: relative;


flex: 1;


}

.search-icon {
position: absolute;
top: 50%;
left: 15px;


transform: translateY(-50%);

color: var(--muted-dark);

pointer-events: none;


}

.search-wrapper input {
width: 100%;


height: 44px;

padding:
    0 15px 0 43px;

border:
    1px solid var(--border);

border-radius: 10px;

outline: none;

background: var(--surface);

color: var(--text);

font: inherit;
font-size: 14px;

transition:
    border-color 0.18s ease,
    background 0.18s ease;


}

.search-wrapper input::placeholder {
color: var(--muted-dark);
}

.search-wrapper input:focus {
border-color: rgba(57, 255, 136, 0.5);


background: var(--surface-hover);


}

#sortSelect {
height: 44px;


min-width: 190px;

padding: 0 13px;

border:
    1px solid var(--border);

border-radius: 10px;

outline: none;

background: var(--surface);

color: var(--text);

font: inherit;
font-size: 14px;

cursor: pointer;


}

/* ============================================================
Podium
============================================================ */

.podium {
display: grid;


grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1.08fr)
    minmax(0, 1fr);

align-items: end;

gap: 18px;

margin-bottom: 28px;


}

.podium-card {
position: relative;


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

min-width: 0;

min-height: 230px;

padding: 28px 20px 25px;

border-radius: 14px;

color: #ffffff;

text-decoration: none;

overflow: hidden;

box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.25);

transition:
    transform 0.18s ease,
    filter 0.18s ease,
    box-shadow 0.18s ease;


}

.podium-card::before {
content: "";


position: absolute;
inset: 0;

background:
    linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.22),
        transparent 40%
    );

pointer-events: none;


}

.podium-card:hover {
transform: translateY(-5px);


filter: brightness(1.08);

box-shadow:
    0 22px 48px rgba(0, 0, 0, 0.32);


}

.podium-second {
min-height: 205px;


background:
    linear-gradient(
        180deg,
        #d8dde2,
        #8e969f
    );


}

.podium-first {
min-height: 260px;


background:
    linear-gradient(
        180deg,
        #ffe38a,
        #c9931c
    );


}

.podium-third {
min-height: 190px;


background:
    linear-gradient(
        180deg,
        #e0a36e,
        #965326
    );


}

.podium-avatar {
position: relative;
z-index: 1;


width: 100px;
height: 100px;

margin-bottom: 17px;

border-radius: 50%;

border:
    4px solid rgba(255, 255, 255, 0.85);

background: rgba(0, 0, 0, 0.18);

object-fit: cover;

box-shadow:
    0 8px 25px rgba(0, 0, 0, 0.25);


}

.podium-first .podium-avatar {
width: 116px;
height: 116px;
}

.podium-username {
position: relative;
z-index: 1;


width: 100%;

overflow: hidden;

text-align: center;
text-overflow: ellipsis;
white-space: nowrap;

font-size: 18px;
font-weight: 800;

text-shadow:
    0 2px 5px rgba(0, 0, 0, 0.3);


}

.podium-first .podium-username {
font-size: 21px;
}

.podium-rap {
position: relative;
z-index: 1;


display: flex;
align-items: center;

gap: 6px;

margin-top: 6px;

font-size: 14px;
font-weight: 700;

text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.3);


}

.podium-rap i {
font-size: 12px;
}

/* ============================================================
Leaderboard
============================================================ */

.leaderboard {
width: 100%;


overflow: hidden;

border:
    1px solid var(--border);

border-radius: 14px;

background: var(--surface);

box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.2);


}

.leaderboard-head,
.leaderboard-row {
display: grid;


grid-template-columns:
    60px
    minmax(0, 1fr)
    140px;

align-items: center;


}

.leaderboard-head {
min-height: 52px;


padding: 0 20px;

border-bottom:
    1px solid var(--border);

color: var(--muted-dark);

font-size: 12px;
font-weight: 700;

text-transform: uppercase;
letter-spacing: 0.7px;


}

.leaderboard-row {
min-height: 76px;


padding: 0 20px;

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

transition:
    background 0.16s ease;


}

.leaderboard-row:last-child {
border-bottom: none;
}

.leaderboard-row:hover {
background: var(--surface-hover);
}

.lb-rank {
display: flex;
align-items: center;
justify-content: flex-start;


color: var(--muted);

font-size: 14px;
font-weight: 700;


}

.lb-rank i {
font-size: 15px;
}

.lb-player {
display: flex;
align-items: center;


min-width: 0;

gap: 13px;


}

.lb-avatar,
.lb-avatar-placeholder {
flex: 0 0 auto;


width: 44px;
height: 44px;

border-radius: 50%;


}

.lb-avatar {
display: block;


object-fit: cover;

background: var(--surface-light);


}

.lb-avatar-placeholder {
display: flex;
align-items: center;
justify-content: center;


background: var(--surface-light);

color: var(--muted-dark);

font-size: 15px;


}

.lb-player-info {
display: flex;
flex-direction: column;


min-width: 0;


}

.lb-username {
overflow: hidden;


color: var(--text);

font-size: 14px;
font-weight: 700;

text-overflow: ellipsis;
white-space: nowrap;


}

.lb-display-name {
overflow: hidden;


margin-top: 3px;

color: var(--muted-dark);

font-size: 12px;

text-overflow: ellipsis;
white-space: nowrap;


}

.lb-stat {
display: flex;
align-items: center;
justify-content: flex-end;


gap: 6px;

color: var(--text);

font-size: 14px;
font-weight: 700;

white-space: nowrap;


}

.lb-stat i {


font-size: 12px;


}

/* ============================================================
Empty / Loading
============================================================ */

.leaderboard-loading,
.leaderboard-empty {
display: flex;
align-items: center;
justify-content: center;


min-height: 150px;

padding: 30px;

color: var(--muted);

font-size: 14px;


}

.leaderboard-sentinel {
width: 100%;
height: 1px;
}

/* ============================================================
Responsive
============================================================ */

@media (max-width: 700px) {


.container,
.site-header-inner {
    width: min(100% - 24px, 1200px);
}

.container {
    padding-top: 32px;
}

.page-header {
    align-items: flex-start;
    flex-direction: column;

    margin-bottom: 22px;
}

.page-header h1 {
    font-size: 29px;
}

.toolbar {
    flex-direction: column;
}

.search-wrapper,
#sortSelect {
    width: 100%;
}

.podium {
    grid-template-columns:
        1fr
        1.08fr
        1fr;

    gap: 8px;
}

.podium-card {
    min-height: 170px;

    padding:
        20px 8px 18px;
}

.podium-first {
    min-height: 205px;
}

.podium-second {
    min-height: 180px;
}

.podium-third {
    min-height: 165px;
}

.podium-avatar {
    width: 70px;
    height: 70px;

    margin-bottom: 12px;
}

.podium-first .podium-avatar {
    width: 82px;
    height: 82px;
}

.podium-username,
.podium-first .podium-username {
    font-size: 13px;
}

.podium-rap {
    font-size: 11px;
}

.leaderboard-head,
.leaderboard-row {
    grid-template-columns:
        45px
        minmax(0, 1fr)
        100px;

    padding-left: 14px;
    padding-right: 14px;
}

.lb-player {
    gap: 9px;
}

.lb-avatar,
.lb-avatar-placeholder {
    width: 38px;
    height: 38px;
}


}

@media (max-width: 430px) {


.site-logo-text {
    display: none;
}

.site-nav-link span {
    display: none;
}

.site-nav-link {
    padding: 10px;
}

.podium {
    gap: 5px;
}

.podium-card {
    min-height: 155px;

    padding:
        16px 5px 15px;
}

.podium-first {
    min-height: 185px;
}

.podium-second {
    min-height: 165px;
}

.podium-third {
    min-height: 150px;
}

.podium-avatar {
    width: 58px;
    height: 58px;

    border-width: 3px;
}

.podium-first .podium-avatar {
    width: 68px;
    height: 68px;
}

.podium-username,
.podium-first .podium-username {
    font-size: 11px;
}

.podium-rap {
    font-size: 10px;
}

.leaderboard-head,
.leaderboard-row {
    grid-template-columns:
        38px
        minmax(0, 1fr)
        90px;
}

.lb-avatar,
.lb-avatar-placeholder {
    width: 34px;
    height: 34px;
}

.lb-username {
    font-size: 13px;
}

.lb-stat {
    font-size: 12px;
}


}