:root {
  color-scheme: dark;
  --rpx: min(0.133333vw, 1px);
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  min-width: 320px;
  min-height: 100%;
  background: #050507;
}

body {
  min-height: 100%;
  margin: 0;
  color: #f8f5eb;
  background: #050507;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

button {
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.leaderboard-page {
  position: relative;
  width: min(100%, 750px);
  min-height: 100vh;
  margin: 0 auto;
  padding-bottom: calc(64 * var(--rpx) + env(safe-area-inset-bottom));
  overflow: hidden;
  background: #050507;
  box-shadow: 0 0 80px rgba(0, 0, 0, .72);
}

.custom-nav {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(108 * var(--rpx));
  padding-top: env(safe-area-inset-top);
}

.custom-nav h1 {
  margin: 0;
  color: #fffdf7;
  font-size: calc(28 * var(--rpx));
  font-weight: 400;
  line-height: 1;
}

.leaderboard-content {
  position: relative;
  z-index: 2;
}

.tabs {
  position: relative;
  z-index: 8;
  display: flex;
  height: calc(70 * var(--rpx));
  margin: calc(10 * var(--rpx)) calc(54 * var(--rpx)) 0;
  padding: calc(3 * var(--rpx));
  overflow: hidden;
  border: calc(1 * var(--rpx)) solid rgba(221, 178, 54, .56);
  border-radius: calc(38 * var(--rpx));
  background: rgba(8, 8, 8, .84);
}

.tab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-width: 0;
  height: calc(62 * var(--rpx));
  border-radius: calc(32 * var(--rpx));
  color: #d6d0bd;
  font-size: calc(27 * var(--rpx));
  font-weight: 700;
}

.tab + .tab {
  border-left: calc(1 * var(--rpx)) solid rgba(213, 193, 138, .24);
}

.tab.active {
  z-index: 2;
  border-left-color: transparent;
  color: #211700;
  background: #e9c85a;
  box-shadow: 0 calc(7 * var(--rpx)) calc(24 * var(--rpx)) rgba(232, 191, 66, .45), inset 0 calc(2 * var(--rpx)) 0 rgba(255, 247, 199, .58);
  font-weight: 900;
}

.season-tab {
  gap: calc(14 * var(--rpx));
}

.season-tab-arrow {
  width: calc(24 * var(--rpx));
  height: calc(24 * var(--rpx));
  opacity: .86;
  transform: rotate(90deg);
  transition: transform 180ms ease;
}

.season-tab-arrow.open {
  transform: rotate(-90deg);
}

.season-dropdown-backdrop {
  position: fixed;
  z-index: 6;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: default;
}

.season-dropdown {
  position: absolute;
  z-index: 9;
  top: calc(88 * var(--rpx));
  left: calc(54 * var(--rpx));
  width: calc(340 * var(--rpx));
  overflow: hidden;
  border: calc(1 * var(--rpx)) solid rgba(226, 209, 168, .16);
  border-radius: calc(22 * var(--rpx));
  background: rgba(43, 42, 39, .98);
  box-shadow: 0 calc(18 * var(--rpx)) calc(48 * var(--rpx)) rgba(0, 0, 0, .56);
}

.season-dropdown-option {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: calc(88 * var(--rpx));
  padding: 0 calc(30 * var(--rpx)) 0 calc(24 * var(--rpx));
  color: #f4f0e6;
  font-size: calc(28 * var(--rpx));
  font-weight: 500;
  text-align: left;
}

.season-dropdown-option + .season-dropdown-option {
  border-top: calc(1 * var(--rpx)) solid rgba(255, 255, 255, .12);
}

.season-dropdown-option.selected {
  color: #fffdf7;
  background: rgba(255, 255, 255, .035);
}

.season-dropdown-check {
  flex: none;
  width: calc(42 * var(--rpx));
  margin-right: calc(8 * var(--rpx));
  color: #f8f5eb;
  font-size: calc(26 * var(--rpx));
  font-weight: 900;
  text-align: center;
}

.season-dates {
  position: relative;
  z-index: 4;
  margin: calc(18 * var(--rpx)) 0 0;
  color: #858690;
  font-size: calc(22 * var(--rpx));
  text-align: center;
}

.state {
  display: block;
  width: 100%;
  min-height: calc(680 * var(--rpx));
  padding-top: calc(250 * var(--rpx));
  color: #858690;
  font-size: calc(28 * var(--rpx));
  text-align: center;
}

.state.error {
  color: #d6b13f;
}

.score-podium-shell {
  position: relative;
  height: calc(705 * var(--rpx));
  margin-top: calc(-60 * var(--rpx));
  margin-bottom: calc(-82 * var(--rpx));
  overflow: hidden;
}

.score-hall-background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  opacity: .95;
}

.podium-stage-header {
  display: none;
}

.score-podium {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: 100%;
  padding: calc(226 * var(--rpx)) calc(28 * var(--rpx)) calc(28 * var(--rpx));
}

.score-place {
  display: flex;
  align-items: center;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.score-place.p1 {
  flex: 1.06;
}

.score-place.p2 {
  transform: translateY(calc(-30 * var(--rpx)));
}

.score-place.p3 {
  transform: translateY(calc(-28 * var(--rpx)));
}

.score-portrait {
  position: relative;
  z-index: 3;
  margin-bottom: calc(24 * var(--rpx));
}

.score-avatar,
.avatar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 50%;
  color: #e6c24a;
  background: #171715;
  font-weight: 900;
}

.score-avatar {
  z-index: 1;
  width: calc(154 * var(--rpx));
  height: calc(154 * var(--rpx));
  font-size: calc(38 * var(--rpx));
  box-shadow: 0 calc(8 * var(--rpx)) calc(24 * var(--rpx)) rgba(0, 0, 0, .82);
}

.score-place.p1 .score-avatar {
  width: calc(174 * var(--rpx));
  height: calc(174 * var(--rpx));
  box-shadow: 0 0 calc(34 * var(--rpx)) rgba(235, 190, 48, .56), 0 calc(10 * var(--rpx)) calc(28 * var(--rpx)) rgba(0, 0, 0, .85);
}

.score-avatar img,
.avatar img {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.score-avatar.empty {
  color: rgba(230, 194, 74, .42);
  background: #11110f;
}

.score-frame {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: calc(248 * var(--rpx));
  height: calc(248 * var(--rpx));
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.score-place.p1 .score-frame {
  width: calc(284 * var(--rpx));
  height: calc(284 * var(--rpx));
  filter: drop-shadow(0 0 calc(16 * var(--rpx)) rgba(232, 189, 47, .28));
}

.rank-medal {
  position: absolute;
  z-index: 4;
  bottom: calc(-38 * var(--rpx));
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(52 * var(--rpx));
  height: calc(52 * var(--rpx));
  border: calc(2 * var(--rpx)) solid rgba(31, 31, 31, .88);
  border-radius: 50%;
  color: #242424;
  background: #d8d9dc;
  font-size: calc(24 * var(--rpx));
  font-weight: 900;
  transform: translateX(-50%);
}

.p1 .rank-medal {
  bottom: calc(-42 * var(--rpx));
  width: calc(56 * var(--rpx));
  height: calc(56 * var(--rpx));
  color: #211800;
  background: #e4bd3d;
  font-size: calc(27 * var(--rpx));
}

.p3 .rank-medal {
  color: #321a0d;
  background: #d78a54;
}

.score-step {
  display: flex;
  align-items: center;
  width: 100%;
  height: calc(274 * var(--rpx));
  padding: calc(26 * var(--rpx)) calc(8 * var(--rpx)) 0;
  border: calc(1 * var(--rpx)) solid rgba(209, 166, 48, .44);
  border-bottom: 0;
  border-radius: 48% 48% 0 0 / calc(20 * var(--rpx)) calc(20 * var(--rpx)) 0 0;
  flex-direction: column;
  background: rgba(14, 13, 10, .74);
  box-shadow: inset 0 calc(5 * var(--rpx)) calc(22 * var(--rpx)) rgba(210, 170, 55, .12);
}

.score-place.p1 .score-step {
  height: calc(344 * var(--rpx));
  border-color: rgba(230, 188, 55, .68);
  background: rgba(28, 24, 13, .78);
  box-shadow: inset 0 calc(8 * var(--rpx)) calc(30 * var(--rpx)) rgba(229, 188, 55, .2), 0 0 calc(24 * var(--rpx)) rgba(209, 165, 44, .08);
}

.score-place.p3 .score-step {
  height: calc(256 * var(--rpx));
}

.podium-name {
  display: block;
  max-width: 100%;
  margin-top: calc(8 * var(--rpx));
  overflow: hidden;
  color: #fffdf4;
  font-size: calc(28 * var(--rpx));
  font-weight: 900;
  line-height: calc(38 * var(--rpx));
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.score-place.p1 .podium-name {
  font-size: calc(31 * var(--rpx));
}

.podium-uid,
.member-uid {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  color: #eee9dc;
  font-family: Arial, "Helvetica Neue", sans-serif;
  letter-spacing: calc(1 * var(--rpx));
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.uid-plate-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.podium-uid-wrap {
  width: calc(160 * var(--rpx));
  max-width: 100%;
  margin-top: calc(14 * var(--rpx));
}

.podium-uid,
.member-uid {
  font-size: calc(25 * var(--rpx));
  line-height: calc(29 * var(--rpx));
}

.member-uid-wrap {
  grid-column: 4;
  justify-self: center;
  width: calc(160 * var(--rpx));
}

.uid-plate-wrap.vanity {
  gap: calc(5 * var(--rpx));
}

.vanity-uid-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: calc(28 * var(--rpx));
  height: calc(28 * var(--rpx));
  border: calc(1 * var(--rpx)) solid rgba(235, 190, 62, .82);
  border-radius: calc(7 * var(--rpx));
  color: #ffe18a;
  background: rgba(113, 74, 8, .86);
  box-shadow: 0 0 calc(9 * var(--rpx)) rgba(232, 180, 44, .28);
  font-size: calc(18 * var(--rpx));
  font-weight: 900;
  line-height: calc(28 * var(--rpx));
}

.title-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  margin-top: calc(14 * var(--rpx));
  color: #d0a63b;
  font-size: calc(25 * var(--rpx));
  line-height: calc(30 * var(--rpx));
  white-space: nowrap;
}

.title-badge img {
  flex: none;
  width: calc(36 * var(--rpx));
  height: calc(36 * var(--rpx));
  margin-right: calc(5 * var(--rpx));
}

.title-badge span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.title-badge.star { color: #b9a6e4; }
.title-badge.diamond { color: #82b9dd; }
.title-badge.platinum { color: #b8c8bd; }
.title-badge.gold { color: #c29c54; }

.podium-score {
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin-top: calc(14 * var(--rpx));
  color: #e5bb44;
  font-size: calc(34 * var(--rpx));
  font-weight: 900;
  line-height: calc(44 * var(--rpx));
  white-space: nowrap;
}

.score-place.p1 .podium-score {
  font-size: calc(39 * var(--rpx));
}

.score-unit {
  margin-left: calc(6 * var(--rpx));
  color: #9c8a5c;
  font-size: calc(18 * var(--rpx));
  font-weight: 500;
}

.rank-list {
  position: relative;
  z-index: 3;
  margin: 0;
  padding: 0 calc(28 * var(--rpx));
  border-top: calc(1 * var(--rpx)) solid rgba(183, 151, 65, .18);
  list-style: none;
  background: rgba(7, 7, 7, .91);
}

.rank-row {
  display: grid;
  grid-template-columns: calc(58 * var(--rpx)) calc(90 * var(--rpx)) minmax(0, 1fr) calc(160 * var(--rpx)) calc(176 * var(--rpx));
  align-items: center;
  min-height: calc(130 * var(--rpx));
  border-bottom: calc(1 * var(--rpx)) solid rgba(184, 165, 110, .16);
}

.rank-no {
  color: #9b8657;
  font-size: calc(31 * var(--rpx));
  font-weight: 800;
  text-align: center;
}

.avatar {
  width: calc(78 * var(--rpx));
  height: calc(78 * var(--rpx));
  border: calc(2 * var(--rpx)) solid rgba(217, 178, 65, .65);
  font-size: calc(28 * var(--rpx));
}

.member-info {
  min-width: 0;
  padding-left: calc(15 * var(--rpx));
}

.name {
  display: block;
  overflow: hidden;
  color: #fffdf8;
  font-size: calc(29 * var(--rpx));
  font-weight: 800;
  line-height: calc(38 * var(--rpx));
  text-overflow: ellipsis;
  white-space: nowrap;
}

.title-badge.compact {
  justify-content: flex-start;
  min-width: 0;
  margin-top: calc(5 * var(--rpx));
  font-size: calc(20 * var(--rpx));
  line-height: calc(28 * var(--rpx));
}

.title-badge.compact img {
  width: calc(30 * var(--rpx));
  height: calc(30 * var(--rpx));
}

.score {
  grid-column: 5;
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  width: 100%;
  padding-left: calc(16 * var(--rpx));
  color: #dcb44d;
  font-size: calc(34 * var(--rpx));
  font-weight: 900;
  white-space: nowrap;
}

.connection-notice {
  position: fixed;
  z-index: 30;
  right: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom));
  padding: 9px 14px;
  border: 1px solid rgba(214, 177, 63, .38);
  border-radius: 999px;
  color: #e9c85a;
  background: rgba(12, 12, 12, .92);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .5);
  font-size: 13px;
  transform: translateX(50%);
}

.fullscreen-button {
  display: none;
}

/*
 * A television is a glanceable landscape display, not a tall touch surface.
 * Keep the miniapp layout unchanged on phones and split the available canvas
 * between the podium and the remaining ranks on wide landscape screens.
 */
@media (min-width: 1200px) and (min-height: 700px) and (min-aspect-ratio: 4 / 3) {
  html,
  body {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .leaderboard-page {
    width: min(100%, 1800px);
    height: 100vh;
    min-height: 0;
    padding: 0 18px 16px;
    overflow: hidden;
    box-shadow: none;
  }

  .custom-nav {
    display: none;
  }

  .fullscreen-button {
    position: fixed;
    z-index: 24;
    top: 17px;
    right: max(18px, calc((100vw - 1800px) / 2 + 18px));
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 76px;
    height: 40px;
    padding: 0 17px;
    border: 1px solid rgba(218, 177, 62, .52);
    border-radius: 20px;
    color: #ddc87f;
    background: rgba(10, 9, 7, .9);
    box-shadow: inset 0 1px 0 rgba(255, 239, 181, .08), 0 8px 24px rgba(0, 0, 0, .28);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    backdrop-filter: blur(8px);
  }

  .fullscreen-button:hover,
  .fullscreen-button:focus-visible,
  .fullscreen-button[aria-pressed="true"] {
    border-color: rgba(239, 200, 82, .88);
    color: #f6d872;
    background: rgba(39, 31, 12, .94);
    outline: none;
  }

  .leaderboard-content {
    display: grid;
    height: 100vh;
    min-height: 0;
    padding-top: 14px;
    grid-template-rows: 52px 31px minmax(0, 1fr);
  }

  .tabs {
    align-self: start;
    grid-row: 1;
    width: min(720px, 56vw);
    height: 48px;
    margin: 0 auto;
    padding: 2px;
    border-radius: 26px;
  }

  .tab {
    height: 42px;
    border-radius: 23px;
    font-size: 20px;
  }

  .season-tab {
    gap: 9px;
  }

  .season-tab-arrow {
    width: 18px;
    height: 18px;
  }

  .season-dropdown {
    top: 50px;
    left: calc(50% - min(360px, 28vw));
    width: min(330px, 27vw);
    border-radius: 16px;
  }

  .season-dropdown-option {
    min-height: 58px;
    padding: 0 20px 0 14px;
    font-size: 19px;
  }

  .season-dropdown-check {
    width: 30px;
    margin-right: 5px;
    font-size: 18px;
  }

  .season-dates {
    align-self: center;
    grid-row: 2;
    margin: 0;
    font-size: 17px;
  }

  .state {
    grid-row: 3;
    min-height: 0;
    padding-top: 22vh;
    font-size: 22px;
  }

  #board:not([hidden]) {
    display: grid;
    min-height: 0;
    padding: 6px 0 0;
    gap: 18px;
    grid-row: 3;
    grid-template-columns: minmax(540px, .96fr) minmax(620px, 1.04fr);
  }

  .score-podium-shell {
    isolation: isolate;
    height: 100%;
    min-height: 0;
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(213, 174, 65, .34);
    border-radius: 28px;
    background: #070707;
    box-shadow: inset 0 0 70px rgba(0, 0, 0, .72), 0 20px 60px rgba(0, 0, 0, .28);
  }

  .score-hall-background {
    object-fit: cover;
    opacity: 1;
    filter: saturate(1.13) contrast(1.08) brightness(.94);
  }

  .podium-stage-header {
    position: absolute;
    z-index: 3;
    top: 24px;
    left: 50%;
    display: flex;
    align-items: center;
    width: min(420px, 78%);
    padding: 13px 22px 12px;
    border: 1px solid rgba(226, 188, 77, .3);
    border-radius: 999px;
    flex-direction: column;
    color: #a9945e;
    background: rgba(8, 7, 5, .72);
    box-shadow: 0 12px 38px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 235, 169, .09);
    transform: translateX(-50%);
    backdrop-filter: blur(8px);
  }

  .podium-stage-header strong {
    margin-top: 3px;
    color: #f4d77d;
    font-family: "Songti SC", STSong, "Noto Serif CJK SC", serif;
    font-size: 26px;
    font-weight: 700;
    line-height: 32px;
    letter-spacing: 8px;
    text-indent: 8px;
    text-shadow: 0 3px 18px rgba(226, 181, 51, .32);
  }

  .podium-stage-header > span:last-child {
    margin-top: 1px;
    font-size: 11px;
    line-height: 16px;
    letter-spacing: 3px;
  }

  .podium-stage-kicker {
    color: #c8a64e;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 9px;
    line-height: 12px;
    letter-spacing: 5px;
  }

  .score-podium {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
  }

  .score-place {
    position: absolute;
    display: flex;
    align-items: center;
    width: 34%;
    flex: none;
    transform: none;
  }

  .score-place.p1 {
    z-index: 6;
    top: 165px;
    left: 50%;
    width: 41%;
    transform: translateX(-50%);
  }

  .score-place.p2 {
    z-index: 4;
    top: 245px;
    left: 3.5%;
    transform: none;
  }

  .score-place.p3 {
    z-index: 4;
    top: 245px;
    right: 3.5%;
    transform: none;
  }

  .score-portrait {
    margin-bottom: 22px;
  }

  .score-avatar {
    width: 118px;
    height: 118px;
    font-size: 30px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .9);
  }

  .score-frame {
    width: 196px;
    height: 196px;
  }

  .score-place.p1 .score-avatar {
    width: 154px;
    height: 154px;
    box-shadow: 0 0 48px rgba(235, 190, 48, .58), 0 14px 36px rgba(0, 0, 0, .9);
  }

  .score-place.p1 .score-frame {
    width: 250px;
    height: 250px;
    filter: drop-shadow(0 0 18px rgba(232, 189, 47, .36));
  }

  .rank-medal {
    bottom: -36px;
    width: 44px;
    height: 44px;
    border-width: 2px;
    font-size: 20px;
  }

  .p1 .rank-medal {
    bottom: -40px;
    width: 50px;
    height: 50px;
    font-size: 24px;
  }

  .score-step {
    height: 244px;
    padding: 28px 7px 0;
    border-radius: 42% 42% 0 0 / 18px 18px 0 0;
    background: rgba(12, 11, 8, .84);
    box-shadow: inset 0 5px 24px rgba(210, 170, 55, .12), 0 14px 30px rgba(0, 0, 0, .24);
  }

  .score-place.p1 .score-step {
    height: 300px;
    background: rgba(29, 24, 12, .9);
    box-shadow: inset 0 8px 34px rgba(229, 188, 55, .22), 0 0 34px rgba(209, 165, 44, .14);
  }

  .score-place.p3 .score-step {
    height: 228px;
  }

  .podium-name {
    margin-top: 4px;
    font-size: 22px;
    line-height: 30px;
  }

  .score-place.p1 .podium-name {
    font-size: 27px;
    line-height: 36px;
  }

  .podium-uid-wrap {
    width: 130px;
    margin-top: 9px;
  }

  .podium-uid {
    font-size: 17px;
    line-height: 21px;
  }

  .podium-uid-wrap .vanity-uid-badge {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    font-size: 11px;
    line-height: 18px;
  }

  .score-step .title-badge {
    margin-top: 10px;
    font-size: 17px;
    line-height: 24px;
  }

  .score-step .title-badge img {
    width: 25px;
    height: 25px;
    margin-right: 3px;
  }

  .podium-score {
    margin-top: 10px;
    font-size: 28px;
    line-height: 36px;
  }

  .score-place.p1 .podium-score {
    font-size: 35px;
    line-height: 44px;
  }

  .rank-list {
    display: grid;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 6px 10px;
    gap: 0 12px;
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid rgba(183, 151, 65, .24);
    border-radius: 28px;
    background: rgba(7, 7, 7, .95);
    box-shadow: inset 0 1px 0 rgba(255, 232, 156, .025), 0 20px 60px rgba(0, 0, 0, .22);
    grid-auto-rows: calc((100% - 13px) / 14);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    scrollbar-width: none;
    scroll-behavior: smooth;
  }

  .rank-list::-webkit-scrollbar {
    display: none;
  }

  .rank-row {
    min-height: 0;
    border-bottom-color: rgba(184, 165, 110, .14);
    grid-template-columns: 26px 38px minmax(0, 1fr) 72px 92px;
  }

  .rank-no {
    font-size: 15px;
  }

  .avatar {
    width: 32px;
    height: 32px;
    border-width: 1px;
    font-size: 13px;
  }

  .member-info {
    padding-left: 6px;
  }

  .name {
    font-size: 15px;
    line-height: 18px;
  }

  .title-badge.compact {
    margin-top: 1px;
    font-size: 10px;
    line-height: 12px;
  }

  .title-badge.compact img {
    width: 14px;
    height: 14px;
    margin-right: 2px;
  }

  .member-uid-wrap {
    width: 72px;
  }

  .member-uid {
    font-size: 12px;
    line-height: 14px;
    letter-spacing: 0;
  }

  .uid-plate-wrap.vanity {
    gap: 2px;
  }

  .vanity-uid-badge {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    font-size: 10px;
    line-height: 16px;
  }

  .score {
    width: auto;
    padding-left: 4px;
    font-size: 17px;
  }

  .score-unit {
    margin-left: 3px;
    font-size: 10px;
  }
}

@media (min-width: 1200px) and (min-height: 700px) and (max-height: 760px) and (min-aspect-ratio: 4 / 3) {
  .podium-stage-header {
    top: 18px;
    width: min(380px, 74%);
    padding: 10px 18px 9px;
  }

  .podium-stage-header strong {
    font-size: 23px;
    line-height: 28px;
    letter-spacing: 7px;
    text-indent: 7px;
  }

  .podium-stage-header > span:last-child {
    font-size: 10px;
    line-height: 14px;
  }

  .score-place.p1 {
    top: 140px;
  }

  .score-place.p2,
  .score-place.p3 {
    top: 205px;
  }

  .score-place.p1 .score-avatar {
    width: 140px;
    height: 140px;
  }

  .score-place.p1 .score-frame {
    width: 228px;
    height: 228px;
  }

  .score-avatar {
    width: 104px;
    height: 104px;
  }

  .score-frame {
    width: 174px;
    height: 174px;
  }

  .score-portrait {
    margin-bottom: 18px;
  }

  .score-step {
    height: 202px;
    padding-top: 24px;
  }

  .score-place.p1 .score-step {
    height: 250px;
  }

  .score-place.p3 .score-step {
    height: 190px;
  }

  .score-step .title-badge {
    margin-top: 7px;
  }

  .podium-score {
    margin-top: 7px;
  }
}

@media (min-width: 1200px) and (min-aspect-ratio: 4 / 3) and (min-height: 900px) {
  .podium-stage-header {
    top: 36px;
    width: min(520px, 74%);
    padding: 17px 28px 15px;
  }

  .podium-stage-header strong {
    font-size: 32px;
    line-height: 40px;
    letter-spacing: 11px;
    text-indent: 11px;
  }

  .podium-stage-header > span:last-child {
    font-size: 13px;
    line-height: 18px;
  }

  .podium-stage-kicker {
    font-size: 10px;
    line-height: 14px;
    letter-spacing: 7px;
  }

  .score-place.p1 {
    top: 230px;
  }

  .score-place.p2,
  .score-place.p3 {
    top: 350px;
  }

  .score-place.p1 .score-avatar {
    width: 190px;
    height: 190px;
  }

  .score-place.p1 .score-frame {
    width: 306px;
    height: 306px;
  }

  .score-avatar {
    width: 150px;
    height: 150px;
  }

  .score-frame {
    width: 242px;
    height: 242px;
  }

  .score-portrait {
    margin-bottom: 30px;
  }

  .score-step {
    height: 335px;
  }

  .score-place.p1 .score-step {
    height: 420px;
  }

  .score-place.p3 .score-step {
    height: 315px;
  }

  .podium-name {
    font-size: 24px;
    line-height: 34px;
  }

  .score-place.p1 .podium-name {
    font-size: 31px;
    line-height: 42px;
  }

  .podium-score {
    font-size: 32px;
    line-height: 42px;
  }

  .score-place.p1 .podium-score {
    font-size: 42px;
    line-height: 52px;
  }

  .rank-list {
    gap: 0 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}