#lobby-rank-overlay,
#lobby-rank-overlay * {
  font-family: 'Kanit', 'Noto Sans Thai', system-ui, sans-serif !important;
}

#lobby-rank-overlay {
  position: fixed;
  inset: 0;
  z-index: 10048;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  box-sizing: border-box;
}

#lobby-rank-overlay.is-hidden {
  display: none !important;
}

#lobby-rank-overlay .lobby-rank-dialog {
  position: relative;
  z-index: 1;
  width: min(1107px, calc(100vw - 24px), calc((100dvh - 24px) * (1107 / 952)));
  aspect-ratio: 1107 / 952;
  max-height: calc(100dvh - 24px);
  --lrb-scale: 1;
  --lrb-avatar-focus-y: -14%;
  --lrb-avatar-zoom-ped: 1.03;
  --lrb-avatar-zoom-row: 1.1;
  --lrb-avatar-zoom-self: 1.25;
  pointer-events: none;
}

#lobby-rank-overlay .lobby-rank-dialog * {
  pointer-events: auto;
}

#lobby-rank-overlay .lobby-rank-panel {
  position: relative;
  width: 100%;
  height: 100%;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  overflow: hidden;
}

#lobby-rank-overlay .lobby-rank-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
  user-select: none;
  -webkit-user-drag: none;
}

#lobby-rank-overlay .lobby-rank-head {
  position: absolute;
  left: 50%;
  top: calc(43px * var(--lrb-scale));
  transform: translateX(-50%);
  width: calc(770px * var(--lrb-scale));
  height: calc(67px * var(--lrb-scale));
  border-bottom: none;
}

#lobby-rank-overlay .lobby-rank-head-box {
  display: none;
}

#lobby-rank-overlay .lobby-rank-case-title {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: calc(54px * var(--lrb-scale));
  color: #dffbff;
  font-size: calc(42px * var(--lrb-scale));
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 0 calc(12px * var(--lrb-scale)) rgba(0, 255, 255, 0.5);
}

#lobby-rank-overlay .lobby-rank-close {
  position: absolute;
  top: calc(50px * var(--lrb-scale));
  right: calc(-83px * var(--lrb-scale));
  width: calc(65px * var(--lrb-scale));
  height: calc(65px * var(--lrb-scale));
  min-width: calc(65px * var(--lrb-scale));
  min-height: calc(65px * var(--lrb-scale));
  max-width: calc(65px * var(--lrb-scale));
  max-height: calc(65px * var(--lrb-scale));
  border: none;
  border-radius: 0;
  background: #ffffff;
  color: transparent;
  font-size: 0;
  line-height: 1;
  text-shadow: none;
  cursor: pointer;
  padding: 0;
  margin: 0;
  z-index: 2;
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
}

#lobby-rank-overlay .lobby-rank-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  cursor: pointer;
}

#lobby-rank-overlay .lobby-rank-podium {
  position: absolute;
  top: 19.33%;
  left: 12.47%;
  right: 12.47%;
  height: 17.65%;
  --lrb-ped-width: calc(180px * var(--lrb-scale));
  --lrb-podium-gap: calc(55px * var(--lrb-scale));
  display: grid;
  grid-template-columns: repeat(3, var(--lrb-ped-width));
  align-items: end;
  justify-content: center;
  column-gap: var(--lrb-podium-gap);
}

#lobby-rank-overlay .lobby-rank-ped {
  position: relative;
  width: var(--lrb-ped-width);
  min-width: var(--lrb-ped-width);
  max-width: var(--lrb-ped-width);
  height: auto;
  background: transparent;
  border: none;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: calc(3px * var(--lrb-scale));
  transform-origin: bottom center;
  align-self: end;
}

#lobby-rank-overlay .lobby-rank-ped-badge {
  position: absolute;
  top: calc(-14px * var(--lrb-scale));
  left: calc(-14px * var(--lrb-scale));
  width: calc(51px * var(--lrb-scale));
  height: calc(51px * var(--lrb-scale));
  z-index: 3;
  object-fit: contain;
  pointer-events: none;
  display: block;
}

#lobby-rank-overlay .lobby-rank-ped-pic {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  opacity: 1;
  filter: none;
}

#lobby-rank-overlay .lobby-rank-ped-pic-wrap {
  position: relative;
  overflow: visible;
  border-radius: 0;
}

#lobby-rank-overlay .lobby-rank-ped-avatar {
  position: absolute;
  left: 50%;
  top: 43%;
  width: 100%;
  height: 85%;
  z-index: 1;
  display: block;
  background: transparent !important;
  border: none;
  box-shadow: none;
  border-radius: 0;
  object-fit: cover;
  object-position: center var(--lrb-avatar-focus-y);
  transform: translate(-50%, -50%) scale(var(--lrb-avatar-zoom-ped));
  transform-origin: center center;
}

#lobby-rank-overlay .lobby-rank-ped--1 .lobby-rank-ped-pic-wrap {
  width: calc(111px * var(--lrb-scale));
  height: calc(111px * var(--lrb-scale));
}

#lobby-rank-overlay .lobby-rank-ped--2 .lobby-rank-ped-pic,
#lobby-rank-overlay .lobby-rank-ped--3 .lobby-rank-ped-pic {
  width: 100%;
  height: 100%;
}

#lobby-rank-overlay .lobby-rank-ped--2 .lobby-rank-ped-pic-wrap,
#lobby-rank-overlay .lobby-rank-ped--3 .lobby-rank-ped-pic-wrap {
  width: calc(91px * var(--lrb-scale));
  height: calc(92px * var(--lrb-scale));
}

#lobby-rank-overlay .lobby-rank-ped-name {
  color: #ffffff;
  font-size: calc(20px * var(--lrb-scale));
  font-weight: 500;
  line-height: 1;
  text-align: center;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: calc(-3px * var(--lrb-scale));
}

#lobby-rank-overlay .lobby-rank-ped-score {
  color: #72d9ff;
  font-size: calc(28px * var(--lrb-scale));
  font-weight: 700;
  line-height: 1;
}

#lobby-rank-overlay .lobby-rank-ped--1 .lobby-rank-ped-score {
  color: #DCAB37;
}

.lobby-rank-ped--1 .lobby-rank-ped-avatar {
  transform: translate(-50%, -53%) scale(2.2);
}

#lobby-rank-overlay .lobby-rank-table-wrap {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: calc(770px * var(--lrb-scale));
  top: calc(384px * var(--lrb-scale));
  bottom: calc(126px * var(--lrb-scale));
  display: flex;
  flex-direction: column;
}

#lobby-rank-overlay .lobby-rank-table-head {
  height: calc(67px * var(--lrb-scale));
  width: calc(770px * var(--lrb-scale));
  display: grid;
  grid-template-columns: calc(169px * var(--lrb-scale)) 1fr calc(220px * var(--lrb-scale));
  align-items: center;
  background: url("../img/Leaderboard/header-box.png") center / 100% 100% no-repeat;
  border: none;
}

#lobby-rank-overlay .lobby-rank-table-head > img:nth-child(2) {
  transform: translateX(calc(24px * var(--lrb-scale)));
}

#lobby-rank-overlay .lobby-rank-table-head > img {
  height: calc(46px * var(--lrb-scale));
  width: auto;
  justify-self: center;
  object-fit: contain;
}

#lobby-rank-overlay .lobby-rank-list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
}

#lobby-rank-overlay .lobby-rank-row {
  position: relative;
  min-height: calc(46px * var(--lrb-scale));
  display: grid;
  grid-template-columns: calc(168px * var(--lrb-scale)) 1fr calc(218px * var(--lrb-scale));
  align-items: center;
  color: #e9f8ff;
  font-size: calc(15px * var(--lrb-scale));
  padding: 0 calc(0px * var(--lrb-scale));
}

#lobby-rank-overlay .lobby-rank-row-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(3px * var(--lrb-scale));
  width: 100%;
  object-fit: fill;
  opacity: 0.95;
}

#lobby-rank-overlay .lobby-rank-row-rank {
  justify-self: center;
}

#lobby-rank-overlay .lobby-rank-row-player {
  display: flex;
  align-items: center;
  gap: calc(10px * var(--lrb-scale));
  min-width: 0;
}

#lobby-rank-overlay .lobby-rank-row-pic-bg {
  width: calc(41px * var(--lrb-scale));
  height: calc(41px * var(--lrb-scale));
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 0;
}

#lobby-rank-overlay .lobby-rank-row-pic-bg > img:first-child {
  width: 100%;
  height: 100%;
}

#lobby-rank-overlay .lobby-rank-row-avatar {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(31px * var(--lrb-scale));
  height: calc(28px * var(--lrb-scale));
  transform: translate(-50%, -64%) scale(var(--lrb-avatar-zoom-row));
  transform-origin: center top;
  object-fit: cover;
  object-position: center var(--lrb-avatar-focus-y);
  border-radius: 50%;
}

#lobby-rank-overlay .lobby-rank-row-name {
  text-align: center;
  width: 100%;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transform: translateX(calc(2px * var(--lrb-scale)));
}

#lobby-rank-overlay .lobby-rank-row-score {
  justify-self: center;
}

#lobby-rank-overlay .lobby-rank-self {
  position: absolute;
  left: 50%;
  bottom: calc(94px * var(--lrb-scale));
  transform: translateX(-50%);
  width: calc(761px * var(--lrb-scale));
  height: calc(95px * var(--lrb-scale));
  display: grid;
  grid-template-columns: calc(115px * var(--lrb-scale)) calc(90px * var(--lrb-scale)) 1fr calc(164px * var(--lrb-scale));
  align-items: center;
}

#lobby-rank-overlay .lobby-rank-self-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#lobby-rank-overlay .lobby-rank-self-rank,
#lobby-rank-overlay .lobby-rank-self-name,
#lobby-rank-overlay .lobby-rank-self-score {
  position: relative;
  z-index: 1;
  line-height: 1;
}

#lobby-rank-overlay .lobby-rank-self-rank {
  justify-self: center;
  color: #ff58d7;
  font-size: calc(34px * var(--lrb-scale));
  font-weight: 700;    
  transform: translateX(calc(20px * var(--lrb-scale)));

}

#lobby-rank-overlay .lobby-rank-self-av-wrap {
  position: relative;
  z-index: 1;
  width: calc(61px * var(--lrb-scale));
  height: calc(61px * var(--lrb-scale));
  justify-self: center;
  transform: translateX(calc(23px * var(--lrb-scale)));
}

#lobby-rank-overlay .lobby-rank-self-pic-bg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#lobby-rank-overlay .lobby-rank-self-avatar {
  position: absolute;
  left: 50%;
  top: 46%;
  width: calc(47px * var(--lrb-scale));
  height: calc(42px * var(--lrb-scale));
  transform: translate(-50%, -67%) scale(var(--lrb-avatar-zoom-self));
  transform-origin: center top;
  border-radius: 50%;
  object-fit: cover;
  object-position: center var(--lrb-avatar-focus-y);
}

#lobby-rank-overlay .lobby-rank-self-name {
  color: #ffffff;
  font-size: calc(34px * var(--lrb-scale));
  font-weight: 700;
  text-align: center;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: calc(16px * var(--lrb-scale));
  transform: translateX(calc(17px * var(--lrb-scale)));
}

#lobby-rank-overlay .lobby-rank-self-score {
  justify-self: center;
  color: #ff58d7;
  font-size: calc(34px * var(--lrb-scale));
  font-weight: 700;
  transform: translateX(calc(-23px * var(--lrb-scale)));
}