:root {
  color-scheme: dark;
  --night: #05091f;
  --night-deep: #020515;
  --panel: #0a1550;
  --panel-deep: #07113f;
  --panel-soft: #111d6a;
  --blue: #1f70ff;
  --ice: #8fe9ff;
  --violet: #8b4dff;
  --pink: #ff49c8;
  --gold: #f8c94f;
  --gold-deep: #a86b19;
  --white: #f7f7ff;
  --muted: #9ea8d8;
  --line: rgba(165, 185, 255, .26);
  --page-width: 520px;
  --ease: cubic-bezier(.18, .78, .22, 1);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  min-width: 320px;
  margin: 0;
  color: var(--white);
  background: var(--night-deep);
  font-family: "Avenir Next", "Helvetica Neue", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.45;
}
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { border: 0; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 3px solid var(--ice); outline-offset: 4px; }

.skip-link {
  position: fixed;
  z-index: 8;
  top: 12px;
  left: 12px;
  padding: 9px 13px;
  color: var(--night);
  background: var(--gold);
  border-radius: 999px;
  transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }

.ranking-page {
  position: relative;
  width: min(100%, var(--page-width));
  min-height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  background: var(--night);
  box-shadow: 0 0 90px rgba(31, 112, 255, .12);
}

.site-header {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  padding: 10px 18px;
  background: rgba(3, 6, 25, .8);
  border-bottom: 1px solid rgba(143, 233, 255, .15);
  backdrop-filter: blur(12px);
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--gold);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .045em;
  text-decoration: none;
}
.wordmark-mark {
  position: relative;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  background: linear-gradient(145deg, #ffeaa0, var(--gold) 55%, var(--gold-deep));
  clip-path: polygon(50% 0, 61% 34%, 98% 36%, 69% 57%, 79% 94%, 50% 72%, 21% 94%, 31% 57%, 2% 36%, 39% 34%);
  filter: drop-shadow(0 0 8px rgba(248, 201, 79, .55));
}
.wordmark-mark span {
  width: 12px;
  height: 12px;
  background: var(--night);
  clip-path: inherit;
}
.rules-trigger {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: var(--gold);
  background: rgba(17, 29, 106, .75);
  border: 1px solid rgba(248, 201, 79, .65);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(143, 233, 255, .12), 0 0 18px rgba(31, 112, 255, .32);
  cursor: pointer;
  font-size: 19px;
  font-weight: 900;
  line-height: 1;
  transition: transform 220ms var(--ease), background 220ms var(--ease), color 220ms var(--ease);
}
.rules-trigger:hover { color: var(--night); background: var(--gold); transform: rotate(8deg) translateY(-1px); }
.rules-trigger:active { transform: scale(.95); }

.hero-section {
  position: relative;
  min-height: 470px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(2, 5, 21, .05) 55%, rgba(2, 5, 21, .78) 100%),
    url("./party-star-background.png") center top / cover no-repeat;
  isolation: isolate;
}
.hero-section::before,
.hero-section::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
}
.hero-section::before {
  display: none;
}
.hero-section::after {
  z-index: 4;
  background: linear-gradient(180deg, transparent 70%, rgba(3, 5, 20, .85));
}
.hero-scene { display: none; }
.hero-content {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.hero-content h1 {
  margin: 0;
}
.stage-arch {
  position: absolute;
  left: 50%;
  bottom: -155px;
  border: 1px solid rgba(143, 233, 255, .65);
  border-bottom: 0;
  border-radius: 50% 50% 0 0;
  transform: translateX(-50%);
}
.stage-arch::after {
  position: absolute;
  inset: 8px;
  content: "";
  border: 1px solid rgba(255, 73, 200, .52);
  border-bottom: 0;
  border-radius: inherit;
}
.stage-arch-back { width: 108%; height: 270px; opacity: .45; }
.stage-arch-mid { width: 84%; height: 220px; opacity: .58; }
.stage-arch-front { width: 61%; height: 165px; border-color: rgba(248, 201, 79, .72); opacity: .72; }
.light-beam {
  position: absolute;
  top: 85px;
  width: 2px;
  height: 330px;
  transform-origin: top center;
  filter: blur(.2px);
}
.light-beam::before {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(180deg, rgba(143, 233, 255, .95), transparent);
  box-shadow: 0 0 24px 8px rgba(31, 112, 255, .4);
}
.light-beam-left { left: 17%; transform: rotate(-31deg); }
.light-beam-right { right: 17%; transform: rotate(31deg); }
.disco-ball {
  position: absolute;
  top: 17px;
  left: 50%;
  width: clamp(116px, 30vw, 156px);
  aspect-ratio: 1;
  overflow: hidden;
  border: 2px solid rgba(223, 239, 255, .9);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 26%, #eaffff 0 5%, #69dcff 7%, transparent 19%),
    repeating-linear-gradient(0deg, rgba(6, 11, 46, .2) 0 10px, rgba(204, 237, 255, .72) 11px 12px, transparent 13px 18px),
    repeating-linear-gradient(90deg, rgba(6, 11, 46, .24) 0 12px, rgba(185, 219, 255, .78) 13px 14px, transparent 15px 22px),
    conic-gradient(from 34deg, #1a36b4, #d74fff, #27d7ff, #3448d8, #ed55e4, #1a36b4);
  box-shadow: 0 0 16px 4px rgba(122, 233, 255, .55), 0 0 42px 12px rgba(139, 77, 255, .5);
  transform: translateX(-50%);
}
.disco-ball::before {
  position: absolute;
  top: -105px;
  left: 50%;
  width: 1px;
  height: 106px;
  content: "";
  background: linear-gradient(180deg, transparent, var(--gold));
}
.disco-ball span {
  position: absolute;
  inset: 44% 10% auto;
  height: 3px;
  background: rgba(255, 255, 255, .74);
  box-shadow: 0 0 10px rgba(255, 255, 255, .8);
  transform: rotate(-8deg);
}
.stage-floor {
  position: absolute;
  right: -17%;
  bottom: -80px;
  left: -17%;
  height: 150px;
  border: 2px solid rgba(248, 201, 79, .6);
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 12deg, rgba(143, 233, 255, .18) 0 5deg, transparent 5deg 13deg),
    radial-gradient(ellipse, rgba(139, 77, 255, .65), transparent 68%);
  box-shadow: 0 -12px 25px rgba(31, 112, 255, .35);
}

.ranking-shell {
  position: relative;
  z-index: 6;
  width: calc(100% - 20px);
  margin: -24px auto 0;
  padding: 26px 14px 18px;
  background:
    linear-gradient(180deg, rgba(28, 48, 126, .72) 0%, rgba(10, 22, 75, .92) 34%, rgba(5, 12, 43, .98) 100%),
    var(--panel-deep);
  border: 1px solid rgba(248, 201, 79, .96);
  border-radius: 24px;
  box-shadow:
    0 0 0 1px rgba(255, 245, 171, .42),
    0 0 0 5px rgba(4, 8, 31, .82),
    inset 0 1px 0 rgba(255, 250, 201, .68),
    inset 0 12px 24px rgba(74, 132, 255, .14),
    0 20px 38px rgba(0, 0, 0, .44);
}
.ranking-shell::before {
  position: absolute;
  inset: 7px;
  content: "";
  pointer-events: none;
  border: 1px solid rgba(248, 201, 79, .36);
  border-radius: 17px;
  background-image:
    linear-gradient(45deg, transparent 47%, rgba(143, 233, 255, .055) 48% 52%, transparent 53%),
    linear-gradient(-45deg, transparent 47%, rgba(143, 233, 255, .055) 48% 52%, transparent 53%);
  background-size: 24px 24px;
  opacity: .28;
}
.ranking-shell::after {
  position: absolute;
  z-index: 1;
  top: 6px;
  right: 22px;
  left: 22px;
  height: 4px;
  content: "";
  pointer-events: none;
  border-top: 1px solid rgba(255, 246, 190, .7);
  border-bottom: 1px solid rgba(143, 233, 255, .22);
  background: linear-gradient(90deg, transparent, rgba(255, 236, 146, .18) 18%, rgba(143, 233, 255, .16) 50%, rgba(255, 236, 146, .18) 82%, transparent);
  opacity: .8;
}
.shell-crest {
  position: absolute;
  top: -23px;
  left: 50%;
  display: grid;
  width: 54px;
  height: 42px;
  place-items: center;
  background: conic-gradient(from 20deg, #fff0aa, #c78726 25%, #ffe79a 48%, #a86b19 72%, #fff0aa);
  clip-path: polygon(50% 0, 64% 27%, 98% 34%, 73% 60%, 79% 100%, 50% 79%, 21% 100%, 27% 60%, 2% 34%, 36% 27%);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .58)) drop-shadow(0 0 8px rgba(248, 201, 79, .38));
  transform: translateX(-50%);
}
.shell-crest::before {
  position: absolute;
  inset: 5px 9px 7px;
  content: "";
  border: 1px solid rgba(255, 248, 201, .62);
  clip-path: inherit;
  opacity: .72;
}
.shell-crest span { width: 17px; height: 17px; background: linear-gradient(135deg, #a66dff, #7138e8); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); box-shadow: 0 0 0 1px rgba(20, 9, 76, .38); }
.shell-corner {
  position: absolute;
  z-index: 1;
  width: 27px;
  height: 27px;
  border: 1px solid rgba(248, 201, 79, .88);
  border-radius: 7px;
  background: rgba(9, 20, 70, .24);
  box-shadow: 0 0 8px rgba(143, 233, 255, .34);
  transform: rotate(45deg);
}
.shell-corner::after { position: absolute; inset: 6px; content: ""; border: 1px solid rgba(143, 233, 255, .82); border-radius: 3px; }
.shell-corner-tl { top: 14px; left: 7px; }
.shell-corner-tr { top: 14px; right: 7px; }
.shell-corner-bl { bottom: 14px; left: 7px; }
.shell-corner-br { right: 7px; bottom: 14px; }

.room-heading {
  position: relative;
  z-index: 2;
  margin: 0 5px 18px;
  padding: 21px 10px;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(35, 49, 126, .9), rgba(9, 17, 62, .98)),
    linear-gradient(90deg, transparent 8%, rgba(255, 240, 160, .08) 50%, transparent 92%);
  border: 1px solid rgba(248, 201, 79, .96);
  border-radius: 15px;
  box-shadow:
    inset 0 1px 0 rgba(255, 250, 201, .62),
    inset 0 -14px 22px rgba(0, 3, 22, .24),
    0 0 0 1px rgba(143, 233, 255, .18),
    0 8px 18px rgba(0, 0, 0, .2);
}
.room-heading::before,
.room-heading::after {
  position: absolute;
  top: 50%;
  width: 22px;
  height: 22px;
  content: "";
  background: linear-gradient(135deg, #ffe89a, var(--gold));
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  transform: translateY(-50%);
}
.room-heading::before { left: -13px; }
.room-heading::after { right: -13px; }
.room-overline { display: none; }
.room-heading h2 { margin: 0; color: var(--white); font-family: "Arial Black", Arial, sans-serif; font-size: clamp(27px, 8vw, 39px); letter-spacing: .06em; line-height: 1; text-shadow: 0 0 9px rgba(143, 233, 255, .5); }
.room-helper { display: none; }

.podium {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.14fr) minmax(0, 1fr);
  align-items: end;
  gap: 6px;
  padding: 2px 3px 22px;
}
.podium-card {
  position: relative;
  top: -8px;
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  text-align: center;
}
.podium-card.is-first { z-index: 2; grid-column: 2; grid-row: 1; }
.podium-card.is-second { grid-column: 1; grid-row: 1; }
.podium-card.is-third { grid-column: 3; grid-row: 1; }
.podium-card:not(.is-first) { padding-top: 31px; }
.podium-rank {
  position: absolute;
  top: 0;
  z-index: 3;
  display: grid;
  width: 32px;
  height: 34px;
  place-items: center;
  color: var(--night);
  background: linear-gradient(135deg, #fff0a3, var(--gold) 60%, var(--gold-deep));
  border-radius: 0;
  clip-path: polygon(50% 0, 92% 19%, 84% 79%, 50% 100%, 16% 79%, 8% 19%);
  box-shadow: 0 4px 12px rgba(248, 201, 79, .4);
  font-size: 15px;
  font-weight: 900;
  transform: translateY(-43%);
}
.podium-card:not(.is-first) .podium-rank { top: 31px; }
.podium-rank span { transform: none; }
.avatar-frame {
  position: relative;
  display: grid;
  width: clamp(78px, 23vw, 112px);
  aspect-ratio: 1;
  place-items: center;
  padding: 5px;
  overflow: visible;
  background: linear-gradient(135deg, #dffaff, var(--ice) 40%, #2d4fd1);
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(6, 10, 41, .9), 0 0 16px rgba(143, 233, 255, .74);
}
.is-first .avatar-frame {
  width: clamp(102px, 30vw, 148px);
  background: linear-gradient(135deg, #fff3a5, var(--gold) 45%, #d7841e);
  box-shadow: 0 0 0 2px rgba(6, 10, 41, .9), 0 0 24px rgba(248, 201, 79, .76);
}
.is-third .avatar-frame { background: linear-gradient(135deg, #ffb9f0, var(--pink) 46%, var(--violet)); box-shadow: 0 0 0 2px rgba(6, 10, 41, .9), 0 0 16px rgba(255, 73, 200, .74); }
.avatar-inner { position: relative; display: grid; width: 100%; height: 100%; overflow: hidden; place-items: center; border: 2px solid var(--night); border-radius: inherit; background: radial-gradient(circle at 50% 25%, #7f9acb, #162253 58%, #070b27); }
.avatar-placeholder { color: rgba(255, 255, 255, .82); font-size: 23px; font-weight: 900; letter-spacing: .08em; }
.is-first .avatar-placeholder { color: rgba(255, 237, 154, .9); font-size: 31px; }
.avatar-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 240ms var(--ease); }
.avatar-inner.has-image .avatar-image { opacity: 1; }
.avatar-inner.has-image .avatar-placeholder { opacity: 0; }
.podium-name {
  display: block;
  width: 100%;
  min-height: 29px;
  padding: 5px 4px;
  overflow: hidden;
  color: var(--white);
  background: linear-gradient(180deg, rgba(38, 72, 204, .95), rgba(12, 29, 108, .98));
  border: 1px solid var(--ice);
  border-radius: 8px;
  font-size: clamp(10px, 2.7vw, 14px);
  font-weight: 900;
  letter-spacing: .01em;
  line-height: 1.15;
  overflow-wrap: anywhere;
  text-align: center;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}
.is-first .podium-name { color: var(--night); background: linear-gradient(180deg, #ffe998, #c98a22); border-color: #fff0a2; font-size: clamp(11px, 3.1vw, 16px); }
.is-third .podium-name { background: linear-gradient(180deg, #7c28ba, #3b125f); border-color: #ff8bdf; }
.list-heading {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 47px 1fr;
  align-items: center;
  min-height: 31px;
  padding: 0 11px;
  color: var(--ice);
  border-top: 1px solid rgba(248, 201, 79, .62);
  border-bottom: 1px solid rgba(143, 233, 255, .3);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .18em;
}
.list-heading { column-gap: 12px; }
.ranking-list { position: relative; z-index: 2; }
.ranking-row {
  display: grid;
  grid-template-columns: 47px 49px minmax(0, 1fr);
  align-items: center;
  min-height: 78px;
  padding: 10px 8px;
  border-bottom: 1px solid rgba(143, 233, 255, .2);
  transition: background 200ms var(--ease), transform 200ms var(--ease);
}
.ranking-row:hover { background: rgba(31, 112, 255, .14); }
.ranking-row:active { transform: scale(.99); }
.rank-number { color: var(--gold); font-family: "Arial Black", Arial, sans-serif; font-size: 27px; font-weight: 900; letter-spacing: -.04em; }
.list-avatar { position: relative; display: grid; width: 39px; height: 39px; place-items: center; overflow: hidden; border: 1px solid var(--gold); border-radius: 50%; background: radial-gradient(circle at 50% 30%, #6a83c6, #0e174b 68%); }
.list-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 240ms var(--ease); }
.list-avatar.has-image img { opacity: 1; }
.list-avatar.has-image .list-initials { opacity: 0; }
.list-avatar .list-initials { display: grid; width: 100%; height: 100%; place-items: center; color: var(--ice); font-size: 10px; font-weight: 900; }
.list-name { min-width: 0; padding-left: 8px; color: var(--white); font-size: clamp(13px, 3.7vw, 17px); font-weight: 800; letter-spacing: .005em; overflow-wrap: anywhere; }
.board-note { position: relative; z-index: 2; margin: 13px 5px 0; color: var(--muted); font-size: 10px; text-align: center; }

.page-footer { display: flex; justify-content: space-between; width: calc(100% - 40px); margin: 0 auto; padding: 22px 0 30px; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .15em; }
.page-footer span:first-child { color: var(--gold); }

.rules-dialog { width: min(calc(100% - 32px), 420px); max-height: min(80dvh, 620px); padding: 0; color: var(--white); background: transparent; border: 0; }
.rules-dialog::backdrop { background: rgba(1, 3, 15, .8); backdrop-filter: blur(8px); }
.rules-card { position: relative; padding: 28px 24px 24px; overflow: auto; direction: rtl; background: linear-gradient(160deg, #15257c, #080e39 72%); border: 2px solid var(--gold); border-radius: 19px; box-shadow: 0 0 0 5px rgba(4, 8, 31, .85), 0 18px 60px rgba(0, 0, 0, .65), 0 0 28px rgba(31, 112, 255, .28); }
.dialog-close { position: absolute; top: 9px; right: 13px; width: 30px; height: 30px; color: var(--gold); background: transparent; cursor: pointer; font-size: 27px; line-height: 1; }
.dialog-kicker { margin: 0 0 4px; color: var(--ice); font-size: 10px; font-weight: 900; letter-spacing: .2em; text-align: left; direction: ltr; }
.rules-card h2 { margin: 0 0 18px; color: #fff0a3; font-size: 30px; letter-spacing: .04em; text-align: right; }
.rules-content { display: grid; gap: 12px; }
.rule-item { padding-bottom: 12px; border-bottom: 1px solid rgba(143, 233, 255, .22); text-align: right; }
.rule-item:last-child { padding-bottom: 0; border-bottom: 0; }
.rule-goal { margin: 0 0 7px; color: #ffe99a; font-size: 16px; font-weight: 900; line-height: 1.4; }
.rule-rewards { display: grid; gap: 4px; margin: 0; padding: 0; color: #eef1ff; list-style: none; }
.rule-reward { font-size: 13px; line-height: 1.55; }
.rules-footnote { margin: 17px 0 0; color: var(--muted); font-size: 10px; line-height: 1.55; text-align: center; }

@media (prefers-reduced-motion: no-preference) {
  .hero-content h1 { animation: title-arrival 800ms var(--ease) both, title-glow 4s ease-in-out 1s infinite alternate; }
  .ranking-shell { animation: board-arrival 700ms var(--ease) 100ms both; }
  .ranking-row { animation: row-arrival 500ms var(--ease) both; animation-delay: calc((var(--row-index, 0)) * 55ms); }
  .podium-card { animation: podium-arrival 650ms var(--ease) both; animation-delay: calc((var(--podium-index, 0)) * 90ms); }
}
@keyframes title-arrival { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes title-glow { from { filter: brightness(1); } to { filter: brightness(1.12); } }
@keyframes board-arrival { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes podium-arrival { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes row-arrival { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }

@media (min-width: 700px) {
  body { padding: 24px 0; background: radial-gradient(circle at 50% 10%, #101f6c, var(--night-deep) 52%); }
  .ranking-page { border: 1px solid rgba(143, 233, 255, .15); border-radius: 28px; }
  .site-header { border-radius: 28px 28px 0 0; }
  .hero-section { min-height: 470px; }
}

@media (max-width: 699px) {
  .hero-section {
    min-height: 310px;
    background-position: center 10%;
  }
  .ranking-shell {
    margin-top: -40px;
    padding: 20px 11px 14px;
  }
  .room-heading {
    margin-bottom: 8px;
    padding-block: 16px;
  }
  .podium { padding-bottom: 10px; }
  .podium-card:not(.is-first) { padding-top: 26px; }
  .podium-card:not(.is-first) .podium-rank { top: 26px; }
  .avatar-frame { width: clamp(72px, 21vw, 96px); }
  .is-first .avatar-frame { width: clamp(96px, 27vw, 130px); }
  .list-heading { display: none; }
  .ranking-row {
    min-height: 64px;
    padding-block: 7px;
  }
  .rank-number { font-size: 24px; }
  .list-avatar { width: 34px; height: 34px; }
  .list-name { font-size: clamp(12px, 3.5vw, 15px); }
}

@media (max-width: 360px) {
  .ranking-shell { padding-inline: 10px; }
  .podium { gap: 4px; padding-inline: 0; }
  .podium-card:not(.is-first) { padding-top: 27px; }
  .podium-card:not(.is-first) .podium-rank { top: 27px; }
  .podium-name { min-height: 34px; padding-inline: 2px; font-size: 10px; }
  .ranking-row { grid-template-columns: 39px 44px minmax(0, 1fr); padding-inline: 4px; }
  .list-name { padding-left: 5px; font-size: 12px; }
}

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

@media (prefers-reduced-transparency: reduce) {
  .site-header { background: var(--night); backdrop-filter: none; }
  .rules-dialog::backdrop { backdrop-filter: none; }
}