.leaderboard-screen {
  position: relative;
  min-height: 100dvh;
  padding: max(10px, env(safe-area-inset-top)) 10px max(14px, env(safe-area-inset-bottom));
  overflow-x: hidden;
  background-color: #07091e;
  background-image: linear-gradient(180deg, rgba(4, 5, 25, .04), rgba(4, 5, 23, .38)), url('/assets/campaign-v3/leaderboard-temple-bg-v1.webp');
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: cover;
}
.leaderboard-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 26%, rgba(141, 89, 255, .18), transparent 34%), linear-gradient(90deg, rgba(3, 7, 30, .22), transparent 20% 80%, rgba(3, 7, 30, .22));
}
.leaderboard-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  margin: auto;
  padding: 8px 11px 13px;
  border: 2px solid rgba(126, 88, 240, .76);
  border-radius: 29px;
  background: linear-gradient(180deg, rgba(9, 11, 48, .24), rgba(6, 8, 32, .66));
  box-shadow: 0 25px 72px rgba(0, 0, 0, .38), 0 0 32px rgba(103, 62, 255, .24), inset 0 0 0 4px rgba(25, 17, 76, .36), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.leaderboard-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 129px;
  padding: 2px 44px 8px;
  text-align: center;
}
.leaderboard-title-ghost {
  display: block;
  width: 52px;
  height: 55px;
  margin: 0 auto -8px;
  object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(175, 105, 255, .86));
}
.leaderboard-head h2 {
  margin: 0;
  color: #f7f2ff;
  font-size: clamp(38px, 10.5vw, 46px);
  font-family: "Noto Sans TC", system-ui, sans-serif;
  font-weight: 900;
  letter-spacing: .045em;
  line-height: 1;
  text-shadow: 0 2px 0 #5b3a9e, 0 0 14px rgba(187, 122, 255, .82);
}
.leaderboard-head p {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 10px 0 0;
  color: #ffe48a;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
}
.leaderboard-head p::before, .leaderboard-head p::after { content: ""; width: 34px; height: 1px; background: linear-gradient(90deg, transparent, #d7a850); }
.leaderboard-head p::after { transform: rotate(180deg); }
.leaderboard-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 0 0 10px;
  padding: 4px;
  border: 1px solid rgba(116, 91, 217, .5);
  border-radius: 14px;
  background: rgba(5, 8, 34, .7);
}
.leaderboard-tab {
  min-height: 40px;
  border: 0;
  border-radius: 10px;
  color: #bdb4d8;
  background: transparent;
  font-size: 12px;
  font-weight: 900;
}
.leaderboard-tab.is-active {
  color: #17102c;
  background: linear-gradient(180deg, #ffe982, #e6b83f);
  box-shadow: 0 0 14px rgba(255, 215, 90, .22);
}
.leaderboard-panel { min-height: 120px; }
.leaderboard-list { display: grid; gap: 9px; }
.player-history-list { display: grid; gap: 8px; }
.history-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 12px;
  padding: 12px;
  border: 1px solid rgba(113, 87, 227, .58);
  border-radius: 15px;
  background: linear-gradient(105deg, rgba(25, 24, 82, .9), rgba(10, 15, 48, .86));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.history-row-main { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 7px; min-width: 0; }
.history-row-main time { color: #aaa0c4; font-size: 9px; white-space: nowrap; }
.history-row-main strong { overflow: hidden; color: #fff; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.history-row-main small { padding: 2px 6px; border-radius: 999px; color: #241a36; background: #ffe36e; font-size: 8px; font-weight: 900; white-space: nowrap; }
.history-score { display: flex; align-items: baseline; justify-content: end; gap: 3px; color: #55e9ff; white-space: nowrap; }
.history-score b { font-size: 18px; }
.history-score span { font-size: 9px; }
.history-metrics { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0; }
.history-metrics div { display: flex; justify-content: space-between; gap: 8px; min-width: 0; padding: 7px 9px; border-radius: 9px; background: rgba(3, 8, 35, .54); }
.history-metrics dt { overflow: hidden; color: #aaa2c3; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.history-metrics dd { margin: 0; color: #fff3bf; font-size: 10px; font-weight: 900; white-space: nowrap; }
.leaderboard-podium {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 7px;
  min-height: 244px;
  padding: 61px 3px 0;
  border-radius: 22px;
  background: radial-gradient(ellipse at 50% 30%, rgba(255, 218, 94, .25), transparent 28%), radial-gradient(ellipse at 18% 50%, rgba(115, 155, 255, .16), transparent 28%), radial-gradient(ellipse at 82% 52%, rgba(241, 146, 94, .13), transparent 28%);
}
.podium-entry {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: end;
  min-width: 0;
  height: 130px;
  padding: 0 5px 12px;
  border: 2px solid rgba(173, 171, 255, .68);
  border-radius: 10px 10px 6px 6px;
  color: #e3e7ff;
  background: linear-gradient(180deg, rgba(51, 57, 128, .9), rgba(13, 17, 59, .96));
  box-shadow: inset 0 3px 0 rgba(225, 232, 255, .22), 0 -6px 0 rgba(37, 36, 93, .8), 0 0 22px rgba(109, 123, 255, .2);
}
.podium-entry::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 8px;
  right: 8px;
  height: 5px;
  border-radius: 5px 5px 0 0;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
  opacity: .7;
}
.podium-rank-1 {
  grid-column: 2;
  grid-row: 1;
  height: 168px;
  border-color: rgba(255, 218, 77, .94);
  color: #ffe16a;
  background: linear-gradient(180deg, rgba(101, 70, 32, .92), rgba(30, 22, 54, .98));
  box-shadow: inset 0 3px 0 rgba(255, 246, 185, .32), 0 -7px 0 rgba(101, 68, 34, .84), 0 0 30px rgba(255, 202, 54, .24);
}
.podium-rank-2 { grid-column: 1; grid-row: 1; height: 143px; }
.podium-rank-3 {
  grid-column: 3;
  grid-row: 1;
  height: 123px;
  border-color: rgba(238, 158, 103, .78);
  color: #f4ad79;
  background: linear-gradient(180deg, rgba(91, 49, 67, .88), rgba(21, 17, 53, .98));
}
.podium-entry .leaderboard-ghost { position: absolute; top: -65px; width: 88px; height: 94px; }
.podium-rank-1 .leaderboard-ghost { top: -88px; width: 118px; height: 126px; }
.podium-entry .leaderboard-ghost::before { width: 100%; height: 100%; }
.podium-entry .podium-rank { font: 950 30px/1 ui-monospace, monospace; }
.podium-player { display: grid; gap: 2px; max-width: 100%; margin-top: 8px; text-align: center; }
.podium-player strong { overflow: hidden; color: #fff; font-size: 11px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.podium-player span { overflow: hidden; color: #d0c9e4; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.podium-score { margin-top: 7px; color: #62efff; font-size: 18px; font-weight: 950; text-shadow: 0 0 11px rgba(85, 233, 255, .48); }
.podium-entry small, .leaderboard-row small { position: absolute; top: 7px; right: 7px; padding: 2px 6px; border-radius: 999px; color: #1e1537; background: #ffe36e; font-size: 9px; font-weight: 950; }
.leaderboard-rest { display: grid; gap: 7px; }
.leaderboard-row {
  position: relative;
  display: grid;
  grid-template-columns: 38px 43px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 55px;
  padding: 5px 13px 5px 10px;
  border: 1px solid rgba(113, 87, 227, .52);
  border-radius: 14px;
  background: linear-gradient(100deg, rgba(25, 24, 82, .83), rgba(12, 15, 52, .72));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 4px 13px rgba(2, 4, 24, .18);
}
.leaderboard-ghost { width: 43px; height: 43px; display: grid; place-items: center; }
.leaderboard-ghost::before { content: ""; width: 37px; height: 43px; background-image: var(--ghost-image-url); background-position: center; background-repeat: no-repeat; background-size: contain; filter: drop-shadow(0 0 7px rgba(111, 83, 255, .68)); }
.leaderboard-ghost.is-charm::before { width: 33px; height: 41px; background: var(--charm-image-url, url('/assets/campaign-v1/smooth-charm.png')) center / contain no-repeat; filter: drop-shadow(0 0 8px rgba(255, 231, 122, .85)); }
.leaderboard-rank { color: #d5c6ff; font: 950 18px/1 ui-monospace, monospace; }
.leaderboard-player { display: grid; gap: 2px; min-width: 0; }
.leaderboard-player strong { overflow: hidden; color: #fff; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.leaderboard-player span { overflow: hidden; color: #bfb7d8; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.leaderboard-score { justify-self: end; color: #55e9ff; font-size: 18px; font-weight: 950; letter-spacing: .02em; text-shadow: 0 0 9px rgba(85, 233, 255, .35); }
.podium-entry.is-current, .leaderboard-row.is-current { border-color: #ffe36e; box-shadow: 0 0 20px rgba(255, 215, 77, .2), inset 3px 0 0 #ffe36e; }
.leaderboard-context { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 12px; border: 1px solid rgba(255, 224, 109, .85); border-radius: 14px; color: #fff5d2; background: linear-gradient(100deg, rgba(87, 54, 31, .76), rgba(37, 24, 72, .94)); box-shadow: 0 0 18px rgba(255, 210, 69, .14), inset 3px 0 0 #ffe36e; }
.leaderboard-context-player { display: grid; gap: 2px; min-width: 0; }
.leaderboard-context-player:only-child { grid-column: 1 / -1; }
.leaderboard-context-player span { color: #ffe37a; font-size: 9px; font-weight: 850; }
.leaderboard-context-player strong { overflow: hidden; color: #fff; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.leaderboard-context-player small { color: #cfc4df; font-size: 8px; }
.leaderboard-context b { color: #ffe37a; font-size: 14px; white-space: nowrap; }
.leaderboard-context em { color: #55e9ff; font-size: 16px; font-style: normal; font-weight: 950; white-space: nowrap; }
.leaderboard-note { margin: 12px auto 0; color: rgba(211, 205, 231, .72); font-size: 9px; line-height: 1.45; text-align: center; }
.leaderboard-empty { padding: 58px 18px; color: var(--muted); font-size: 12px; line-height: 1.6; text-align: center; }
.leaderboard-loading-skeleton,
.history-loading-skeleton { min-height: 292px; display: grid; gap: 10px; align-content: start; }
.leaderboard-skeleton-podium { min-height: 186px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 8px; }
.leaderboard-skeleton-podium i,
.leaderboard-skeleton-rows i,
.history-loading-skeleton i { display: block; border: 1px solid rgba(120, 102, 210, .22); background: linear-gradient(100deg, rgba(23, 24, 69, .72) 20%, rgba(65, 59, 128, .58) 42%, rgba(23, 24, 69, .72) 64%); background-size: 220% 100%; animation: leaderboard-skeleton-shimmer 1.25s ease-in-out infinite; }
.leaderboard-skeleton-podium i { height: 136px; border-radius: 16px 16px 8px 8px; }
.leaderboard-skeleton-podium i:nth-child(2) { height: 176px; }
.leaderboard-skeleton-rows { display: grid; gap: 8px; }
.leaderboard-skeleton-rows i { height: 54px; border-radius: 14px; }
.history-loading-skeleton { min-height: 276px; }
.history-loading-skeleton i { height: 60px; border-radius: 13px; }
.leaderboard-loading::after { content: ""; display: inline-block; width: 12px; height: 12px; margin-left: 8px; border: 2px solid rgba(85, 233, 255, .28); border-top-color: #55e9ff; border-radius: 50%; vertical-align: -2px; animation: leaderboard-loading-spin .8s linear infinite; }
.leaderboard-error { color: #ffb7c6; }
.leaderboard-retry-button { width: 100%; min-height: 44px; margin-top: 8px; color: #bff7ff; border-color: rgba(85, 233, 255, .55); background: rgba(10, 27, 58, .82); font-weight: 850; }
.leaderboard-card > .back-button { width: 100%; min-height: 48px; margin-top: 10px; border-color: rgba(255, 201, 61, .92); color: #ffe581; background: linear-gradient(180deg, rgba(55, 37, 83, .9), rgba(19, 19, 56, .94)); box-shadow: inset 0 0 0 2px rgba(255, 228, 129, .08), 0 0 18px rgba(255, 191, 54, .1); font-weight: 900; }
@keyframes leaderboard-loading-spin { to { transform: rotate(360deg); } }
@keyframes leaderboard-skeleton-shimmer { to { background-position: -120% 0; } }
@media (max-width: 380px) {
  .leaderboard-card { padding-inline: 9px; }
  .leaderboard-head { min-height: 122px; }
  .leaderboard-podium { gap: 5px; min-height: 232px; }
  .podium-entry { padding-inline: 3px; }
  .podium-entry .leaderboard-ghost { width: 82px; height: 88px; }
  .podium-rank-1 .leaderboard-ghost { width: 108px; height: 116px; }
  .leaderboard-row { grid-template-columns: 36px 40px minmax(0, 1fr) auto; gap: 6px; }
  .leaderboard-context { gap: 7px; padding-inline: 10px; }
  .leaderboard-context em { font-size: 14px; }
}
@media (prefers-reduced-motion: no-preference) { .podium-rank-1 .leaderboard-ghost { animation: leaderboardChampion 2.4s ease-in-out infinite; } }
@media (prefers-reduced-motion: reduce) { .leaderboard-loading::after, .leaderboard-skeleton-podium i, .leaderboard-skeleton-rows i, .history-loading-skeleton i { animation: none; } }
@keyframes leaderboardChampion { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.back-button { width:100%; margin-top:12px; }