:root{
  --leaderboard-gap: 12px;
  --leaderboard-row-bg: #fff;
  --leaderboard-row-hover: color-mix(in srgb, var(--color-primary) 8%, #fff);
  --leaderboard-border: rgba(38, 59, 70, 0.12);
}

body{
  color: var(--color-text);
  background: var(--color-secondary);
}

.leaderboard{
  gap: clamp(20px, 3vw, 32px);
  padding: clamp(24px, 4vw, 40px) 0 clamp(48px, 6vw, 80px);
}

.title{
  font-family: "Intro Rust";
  font-size: clamp(5rem, 9vw, 7rem);
}

.title,
.subtitle{
  text-align: center;
  margin: 0;
  display: flex;
  justify-content: center;
}

.subtitle{
  margin-top: 8px;
  color: color-mix(in srgb, var(--color-text) 75%, #fff);
}

.podium{
  width: min(1200px, 94vw);
  margin: clamp(18px, 3vw, 30px) auto 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
  position: relative;
  overflow: visible;
  box-shadow: none;
}

.podium::before{
  content: none;
}

.podium-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas: "second first third";
  gap: clamp(10px, 2vw, 18px);
  align-items: end;
  position: relative;
  z-index: 4;
}

.podium-grid[data-count="1"]{
  grid-template-columns: minmax(220px, 380px);
  grid-template-areas: "first";
  justify-content: center;
}

.podium-grid[data-count="2"]{
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  grid-template-areas: "first second";
  justify-content: center;
}

.podium-card{
  --podium-height: 88px;
  --podium-step-color: #c4ced8;
  border-radius: 18px 18px 12px 12px;
  border: 1px solid var(--leaderboard-border);
  border-bottom: none;
  background: #fff;
  min-height: 198px;
  padding: 12px 12px calc(var(--podium-height) + 12px);
  position: relative;
  overflow: hidden;
  transition: transform 0.22s ease;
}

.podium-card::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--podium-height);
  background: var(--podium-step-color);
}

.podium-card > :not(.podium-top){
  position: relative;
  z-index: 1;
}

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

.podium-card:focus-visible{
  outline: 3px solid color-mix(in srgb, var(--color-primary) 42%, #fff);
  outline-offset: 4px;
}

.podium-card--1{
  --podium-height: 114px;
  --podium-step-color: #cbb17d;
  grid-area: first;
  transform: translateY(-14px);
}

.podium-card--2{
  --podium-height: 96px;
  --podium-step-color: #b7c1cb;
  grid-area: second;
}

.podium-card--3{
  --podium-height: 76px;
  --podium-step-color: #be9f8d;
  grid-area: third;
}

.podium-card--1:hover{
  transform: translateY(-18px);
}

.podium-top{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 8px;
}

.podium-position{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--podium-height);
  display: grid;
  place-items: center;
  z-index: 2;
  font-family: "Display Bold";
  font-size: clamp(1.4rem, 2.6vw, 1.95rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--color-text) 88%, #000);
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
  pointer-events: none;
}

.podium-rank-badge{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, #ced9e3 58%, transparent);
  background: color-mix(in srgb, #ffffff 84%, transparent);
  display: grid;
  place-items: center;
  color: color-mix(in srgb, var(--color-text) 56%, #fff);
  font-size: 1rem;
  line-height: 1;
}

.podium-rank-badge img{
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.podium-user{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  text-align: center;
}

.podium-avatar{
  width: 66px;
  height: 66px;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  border: 1px solid color-mix(in srgb, #ced9e3 58%, transparent);
}

.podium-avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.podium-meta{
  min-width: 0;
  text-align: center;
}

.podium-username,
.podium-username a{
  color: var(--color-text);
  font-family: "Display Bold";
  font-size: 1rem;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.podium-username a:hover{
  color: var(--color-primary);
}

.podium-xp{
  margin-top: 3px;
  color: color-mix(in srgb, var(--color-text) 75%, #fff);
  font-size: 0.82rem;
  font-family: "Display Bold";
  letter-spacing: 0.03em;
}

.status{
  text-align: center;
  margin: 0 0 12px;
  color: var(--color-text);
}

.wrapper{
  line-height: 1.4;
  margin: 0 auto;
  padding: 1.5em 0 3em;
  width: min(1200px, 94vw);
  overflow: visible;
  position: relative;
  z-index: 10;
}

table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 var(--leaderboard-gap);
  background: transparent;
}

thead th{
  background-color: var(--color-text);
  font-family: "Display Bold";
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  padding: 14px 18px;
  text-align: left;
}

thead th:first-child{ border-radius: 14px 0 0 14px; }
thead th:last-child{ border-radius: 0 14px 14px 0; }
thead th:nth-child(1),
thead th:nth-child(4){ text-align: center; }
thead th:nth-child(3){ text-align: right; }

thead th.ranking-head{
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  z-index: 1;
}

tbody tr{
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}

tbody td{
  background: var(--leaderboard-row-bg);
  border-top: 1px solid var(--leaderboard-border);
  border-bottom: 1px solid var(--leaderboard-border);
  padding: 16px 18px;
  color: var(--color-text);
  text-align: left;
}

tbody td:first-child{
  border-left: 1px solid var(--leaderboard-border);
  border-radius: 16px 0 0 16px;
  font-weight: 800;
  text-align: center;
  width: 72px;
}

tbody td:last-child{
  border-right: 1px solid var(--leaderboard-border);
  border-radius: 0 16px 16px 0;
  text-align: center;
  width: 90px;
}

tbody tr:hover td{
  background: var(--leaderboard-row-hover);
}

tbody tr:hover{
  transform: translateY(-2px);
}

.Ranking{
  text-align: center;
}

.points{
  text-align: right;
  font-family: "Display Bold";
  width: 110px;
}

.Rank img{
  width: 36px;
  height: 36px;
  display: inline-block;
}

.username a{
  color: var(--color-text);
  font-weight: 700;
}

.username a:hover{
  color: var(--color-primary);
}

@media (max-width: 980px){
  .podium-card{
    min-height: 184px;
  }
  .podium-card--1{
    --podium-height: 104px;
    transform: translateY(-10px);
  }
  .podium-card--2{
    --podium-height: 86px;
  }
  .podium-card--3{
    --podium-height: 68px;
  }
  .podium-card--1:hover{
    transform: translateY(-14px);
  }
}

@media (max-width: 720px){
  .podium{
    padding: 0;
    border-radius: 0;
  }
  .podium-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas: "second first third";
    gap: 8px;
  }
  .podium-grid[data-count="2"]{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .podium-grid[data-count="1"]{
    grid-template-columns: 1fr;
  }
  .podium-grid[data-count="2"]{
    grid-template-areas: "first second";
  }
  .podium-card{
    min-height: 156px;
    padding: 9px 8px calc(var(--podium-height) + 9px);
    border-radius: 14px 14px 10px 10px;
  }
  .podium-card--1{
    --podium-height: 82px;
    transform: translateY(-8px);
  }
  .podium-card--2{
    --podium-height: 68px;
  }
  .podium-card--3{
    --podium-height: 54px;
  }
  .podium-card:hover{
    transform: translateY(-4px);
  }
  .podium-card--1:hover{
    transform: translateY(-10px);
  }
  .podium-top{
    margin-bottom: 8px;
    gap: 6px;
  }
  .podium-position{
    font-size: 1.1rem;
  }
  .podium-rank-badge{
    width: 30px;
    height: 30px;
    border-radius: 9px;
  }
  .podium-rank-badge img{
    width: 18px;
    height: 18px;
  }
  .podium-user{
    gap: 6px;
  }
  .podium-avatar{
    width: 52px;
    height: 52px;
  }
  .podium-username,
  .podium-username a{
    font-size: 0.78rem;
    line-height: 1.15;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .podium-xp{
    margin-top: 1px;
    font-size: 0.64rem;
    line-height: 1.15;
  }
  .wrapper{
    padding: 1.25em 0 2.5em;
  }
  table{
    border-spacing: 0 8px;
  }
  thead th,
  tbody td{
    padding: 12px 12px;
  }
  .points{
    width: auto;
  }
  .Rank img{
    width: 32px;
    height: 32px;
  }
  .title{
    font-size: clamp(2rem, 8vw, 2.85rem);
  }
  thead th.ranking-head{
    gap: 8px;
  }
}

@media (max-width: 540px){
  .podium{
    width: calc(100% - 8px);
    padding: 0;
  }
  .podium-grid{
    gap: 6px;
  }
  .podium-card{
    min-height: 142px;
    padding: 8px 6px calc(var(--podium-height) + 7px);
  }
  .podium-card--1{
    --podium-height: 74px;
    transform: translateY(-6px);
  }
  .podium-card--2{
    --podium-height: 62px;
  }
  .podium-card--3{
    --podium-height: 48px;
  }
  .podium-card:hover{
    transform: translateY(-4px);
  }
  .podium-card--1:hover{
    transform: translateY(-8px);
  }
  .podium-top{
    margin-bottom: 6px;
  }
  .podium-position{
    font-size: 0.95rem;
  }
  .podium-rank-badge{
    width: 28px;
    height: 28px;
    border-radius: 8px;
  }
  .podium-rank-badge img{
    width: 16px;
    height: 16px;
  }
  .podium-avatar{
    width: 44px;
    height: 44px;
  }
  .podium-username,
  .podium-username a{
    font-size: 0.68rem;
  }
  .podium-xp{
    font-size: 0.58rem;
  }
  .wrapper{
    width: calc(100% - 8px);
  }
  thead th,
  tbody td{
    padding: 10px 8px;
  }
  thead th{
    font-size: 0.78rem;
    letter-spacing: 0.06em;
  }
  thead th.ranking-head{
    gap: 6px;
  }
  .username,
  .username a{
    overflow-wrap: anywhere;
  }
  tbody td:first-child{
    width: 56px;
  }
  tbody td:last-child{
    width: 72px;
  }
  .Rank img{
    width: 28px;
    height: 28px;
  }
  .info-btn{
    width: 28px;
    height: 28px;
  }
  .info-btn .info-icon{
    width: 18px;
    height: 18px;
  }
}

@media (prefers-reduced-motion: reduce){
  .podium-card,
  tbody tr{
    transition: none;
  }
  .podium-card--1{
    transform: none;
  }
  .podium-card,
  .podium-card:hover,
  .podium-card--1:hover,
  tbody tr:hover{
    transform: none;
  }
}

.xpsystemtitle{
  font-size:14px;
  font-weight:900;
  display:block;
  margin:0 0 4px 0;
}

.info-btn,
.info-btn::after{
  position: relative;
  overflow: visible;
}

.info-btn{
  width:34px;
  height:34px;
  border-radius:50%;
  border:none;
  background:transparent;
  color:var(--color-secondary);
  font-family:"display light";
  cursor:pointer;
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:transform .12s ease;
  vertical-align:middle;
  z-index: 50;
}

.info-btn:hover{
  transform:translateY(-1px);
}

.info-btn .info-icon{
  width:22px;
  height:22px;
  display:block;
  background-color:currentColor;
  -webkit-mask:url("/assets/icons/info.svg") center / contain no-repeat;
  mask:url("/assets/icons/info.svg") center / contain no-repeat;
  transform:translateY(-1px);
}

.info-btn .info-tooltip{
  --tip-y: 6px;
  --tip-delay: .1s;
  position:absolute;
  left:50%;
  bottom:100%;
  transform: translateX(-50%) translateY(var(--tip-y));
  opacity:0;
  visibility:hidden;
  pointer-events:auto;
  background: var(--color-border-soft);
  color: var(--color-text);
  font-size:13px;
  font-weight:700;
  font-family:"display light";
  line-height:1.25;
  padding:10px 12px;
  border-radius:10px;
  white-space:normal;
  width:max-content;
  max-width:min(360px, calc(100vw - 16px));
  box-sizing:border-box;
  box-shadow:none;
  transition: opacity .15s ease var(--tip-delay), transform .15s ease var(--tip-delay), visibility 0s linear var(--tip-delay);
  z-index:9999;
}

.more-infos{
  color:var(--color-primary);
}

.more-infos:hover{
  text-decoration:underline;
  color:var(--color-primary);
}

.info-btn .info-tooltip::after{
  content:"";
  position:absolute;
  left:50%;
  top:100%;
  transform:translateX(-50%);
  width:0;
  height:0;
  border:7px solid transparent;
  border-top-color: var(--color-border-soft);
}

.info-btn:hover .info-tooltip,
.info-btn:focus-visible .info-tooltip{
  opacity:1;
  visibility:visible;
  --tip-y: 0px;
  --tip-delay: 0s;
}

@media (max-aspect-ratio: 16/9){
  .info-btn .info-tooltip{
    left:auto;
    right:0;
    transform: translateY(var(--tip-y));
    max-width:calc(100vw - 16px);
  }
  .info-btn .info-tooltip::after{
    left:auto;
    right:12px;
    transform:none;
  }
}

@media (orientation: portrait){
  .info-btn .info-tooltip{
    left:auto;
    right:0;
    transform: translateY(var(--tip-y));
    max-width:calc(100vw - 16px);
  }
  .info-btn .info-tooltip::after{
    left:auto;
    right:12px;
    transform:none;
  }
}

@media (orientation: portrait){
  thead th:first-child .info-btn .info-tooltip{
    left:0;
    right:auto;
    transform: translateY(var(--tip-y));
  }
  thead th:first-child .info-btn .info-tooltip::after{
    left:18px;
    right:auto;
    transform:translateX(-50%);
  }
}