:root{color-scheme:dark;--gold:#ffe36e;--cyan:#7ef9ff;--panel:rgba(6,14,25,.88);}
*{box-sizing:border-box;}
body{
  margin:0;
  min-height:100vh;
  padding:calc(22px + env(safe-area-inset-top)) 16px calc(26px + env(safe-area-inset-bottom));
  color:#fff;
  font-family:"Microsoft YaHei",Arial,sans-serif;
  background:
    radial-gradient(circle at 20% 0%,rgba(24,110,120,.32),transparent 38%),
    radial-gradient(circle at 85% 20%,rgba(150,118,18,.20),transparent 34%),
    linear-gradient(145deg,#050910,#0a1520 58%,#080b10);
}
.page{width:min(760px,100%);margin:0 auto;}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;}
.back,.refresh{
  min-height:42px;padding:9px 14px;border:1px solid rgba(126,249,255,.3);border-radius:11px;
  color:#dffcff;background:rgba(4,18,29,.72);font:inherit;font-weight:700;text-decoration:none;cursor:pointer;
}
.back:hover,.refresh:hover{border-color:var(--cyan);background:rgba(13,48,62,.72);}
.refresh:disabled{cursor:not-allowed;opacity:.62;border-color:rgba(126,249,255,.18);background:rgba(4,18,29,.52);}
.hero{text-align:center;margin:8px 0 20px;}
.hero h1{margin:0;color:var(--gold);font-size:clamp(28px,7vw,46px);letter-spacing:.04em;text-shadow:0 0 24px rgba(255,227,110,.22);}
.hero p{margin:9px 0 0;color:#a9bfd2;font-size:14px;}
.modeTabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:min(430px,100%);margin:0 auto 14px;padding:5px;border:1px solid rgba(126,249,255,.18);border-radius:14px;background:rgba(3,12,22,.7);}
.modeTab{min-height:42px;margin:0;border:1px solid transparent;border-radius:10px;color:#91a9bc;background:transparent;font:inherit;font-weight:800;cursor:pointer;}
.modeTab[aria-selected="true"]{color:#08131b;border-color:rgba(255,227,110,.72);background:linear-gradient(135deg,#ffe36e,#7ef9ff);box-shadow:0 7px 20px rgba(0,0,0,.25);}
.board{overflow:hidden;border:1px solid rgba(255,227,110,.28);border-radius:18px;background:var(--panel);box-shadow:0 20px 70px rgba(0,0,0,.38);}
.head,.row{display:grid;grid-template-columns:58px minmax(0,1fr) 120px 92px;gap:12px;align-items:center;}
.head{padding:13px 18px;color:#8ea7b9;font-size:12px;border-bottom:1px solid rgba(255,255,255,.09);}
#list{margin:0;padding:0;list-style:none;}
.row{position:relative;isolation:isolate;overflow:hidden;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.07);font-size:15px;}
.row>span{position:relative;z-index:1;}
.row:last-child{border-bottom:0;}
.row.podium{background:linear-gradient(90deg,var(--podium-bg),transparent 72%);box-shadow:inset 3px 0 0 var(--podium-color),inset 0 0 24px var(--podium-glow);animation:podiumPulse 2.6s ease-in-out infinite;}
.row.podium::before{content:"";position:absolute;z-index:0;inset:-80% -35%;pointer-events:none;background:linear-gradient(105deg,transparent 38%,var(--podium-sheen) 50%,transparent 62%);transform:translateX(-55%);animation:podiumSweep 3.8s ease-in-out infinite;}
.row.top-1{--podium-color:#ffe36e;--podium-bg:rgba(255,211,72,.15);--podium-glow:rgba(255,210,70,.13);--podium-sheen:rgba(255,244,184,.18);}
.row.top-2{--podium-color:#d9ecff;--podium-bg:rgba(190,218,240,.12);--podium-glow:rgba(194,222,244,.10);--podium-sheen:rgba(234,247,255,.14);animation-delay:.35s;}
.row.top-3{--podium-color:#e7a76d;--podium-bg:rgba(200,120,62,.13);--podium-glow:rgba(218,139,76,.10);--podium-sheen:rgba(255,209,168,.13);animation-delay:.7s;}
.row.top-1 .rank{text-shadow:0 0 12px rgba(255,227,110,.85);}
.row.top-2 .rank{color:#d9ecff;text-shadow:0 0 10px rgba(217,236,255,.65);}
.row.top-3 .rank{color:#e7a76d;text-shadow:0 0 10px rgba(231,167,109,.62);}
@keyframes podiumPulse{0%,100%{filter:brightness(1);}50%{filter:brightness(1.09);}}
@keyframes podiumSweep{0%,18%{transform:translateX(-58%);}72%,100%{transform:translateX(58%);}}
.rank{color:var(--gold);font-weight:900;font-size:18px;}
.name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;}
.score{text-align:right;color:var(--cyan);font-weight:800;}
.time{text-align:right;color:#c5d3df;font-variant-numeric:tabular-nums;}
.empty{padding:38px 18px;text-align:center;color:#8ea1b2;}
#status{min-height:21px;margin:14px 4px 0;color:#a9bfd2;text-align:center;font-size:13px;}
.credit{margin:22px 0 0;text-align:center;color:#718395;font-size:12px;}
.credit a{color:#6cc8ff;text-decoration:none;}
@media(prefers-reduced-motion:reduce){.row.podium,.row.podium::before{animation:none;}}
@media(max-width:560px){
  body{padding-left:10px;padding-right:10px;}
  .head,.row{grid-template-columns:42px minmax(0,1fr) 82px 58px;gap:6px;}
  .head{padding:11px 10px;}
  .row{padding:13px 10px;font-size:13px;}
  .rank{font-size:15px;}
  .topbar{margin-bottom:12px;}
}

/* Leaderboard light treatment: decorative layers never intercept input. */
.row.podium{min-height:66px;box-shadow:inset 4px 0 0 var(--podium-color),inset 0 0 30px var(--podium-glow);}
.row.podium .rank{display:grid;place-items:center;width:40px;height:36px;border:1px solid var(--podium-color);border-radius:10px;background:rgba(5,12,22,.64);box-shadow:0 0 14px var(--podium-glow),inset 0 0 12px var(--podium-glow);}
.row.top-1{min-height:78px;--podium-bg:rgba(255,211,72,.32);--podium-glow:rgba(255,210,70,.28);}
.row.top-1 .name{color:#fff9df;text-shadow:0 0 14px rgba(255,232,158,.3);}
.row.top-1::after{content:"";position:absolute;z-index:0;pointer-events:none;inset:-45% -8% -35%;transform-origin:50% 0;background:radial-gradient(ellipse at 35% 48%,rgba(255,248,211,.28),transparent 65%),conic-gradient(from 143deg at 35% 0%,transparent 0deg,rgba(255,250,218,.08) 3deg,rgba(255,246,195,.48) 9deg,transparent 18deg,transparent 22deg,rgba(255,253,235,.62) 32deg,transparent 43deg,transparent 47deg,rgba(255,230,142,.40) 54deg,transparent 65deg,transparent 360deg);animation:holyLight 7s ease-in-out infinite;}
.row.top-2{--podium-bg:rgba(173,213,245,.23);--podium-glow:rgba(170,217,255,.23);}
.row.top-2::before{animation-delay:1.15s;}
.row.top-3::before{animation-delay:2.3s;}
.row.top-2::after{content:"";position:absolute;z-index:0;pointer-events:none;left:-230px;top:5px;width:220px;height:5px;border-radius:50%;background:radial-gradient(ellipse at 97% 50%,#fff 0%,#e9faff 3%,transparent 9%),linear-gradient(90deg,transparent,rgba(121,196,255,.36) 22%,rgba(179,226,255,.82) 70%,#fff 97%);box-shadow:0 0 8px rgba(210,243,255,.95),0 0 19px rgba(108,198,255,.75);animation:cometTrail 5.8s ease-in-out infinite;animation-delay:-1.1s;}
.row.top-ten{background:linear-gradient(90deg,rgba(91,205,226,.045),transparent 75%);box-shadow:inset 2px 0 0 rgba(126,249,255,.18),inset 0 0 20px rgba(94,205,223,.025);}
.row.top-ten .rank{text-shadow:0 0 9px rgba(126,249,255,.20);}
@keyframes holyLight{0%,100%{opacity:.60;transform:rotate(-3deg) scaleX(.96);}50%{opacity:1;transform:rotate(3deg) scaleX(1.04);}}
@keyframes cometTrail{0%,8%{left:-230px;opacity:0;}16%{opacity:1;}76%{left:105%;opacity:1;}84%,100%{left:105%;opacity:0;}}
@media(max-width:560px){.row.podium{min-height:62px;}.row.top-1{min-height:74px;}.row.podium .rank{width:34px;height:34px;border-radius:9px;}}
@media(prefers-reduced-motion:reduce){.row.podium,.row.podium::before,.row.top-1::after,.row.top-2::after{animation:none;}.row.top-1::after{opacity:.65;transform:none;}.row.top-2::after{left:12%;width:42%;opacity:.6;}}
/* Third place: slow violet-magenta ink blooms, not a particle burst. */
.row.top-3{--podium-color:#ed9ee9;--podium-bg:rgba(178,63,163,.16);--podium-glow:rgba(210,100,212,.14);--podium-sheen:rgba(244,183,240,.13);}
.row.top-3 .rank{color:#ed9ee9;text-shadow:0 0 10px rgba(226,137,225,.55);}
.ink-bloom{position:absolute;z-index:0;pointer-events:none;width:42px;height:42px;border-radius:47% 53% 56% 44%;background:radial-gradient(ellipse,rgba(252,192,241,.27) 0%,rgba(216,104,208,.13) 24%,transparent 60%);border:1px solid rgba(237,158,233,.13);animation:inkBloom 7.5s ease-out infinite;opacity:0;}
.ink-bloom:nth-of-type(1){left:8%;top:8px;animation-delay:-1.3s;}
.ink-bloom:nth-of-type(2){left:45%;top:22px;width:30px;height:30px;animation-delay:-4.1s;}
.ink-bloom:nth-of-type(3){right:8%;top:-12px;width:48px;height:48px;animation-delay:-6.2s;}
@keyframes inkBloom{0%{transform:scale(.13);opacity:0;}15%{opacity:.85;}65%{opacity:.28;}90%,100%{transform:scale(1.3);opacity:0;}}
@media(prefers-reduced-motion:reduce){.ink-bloom{animation:none;opacity:.28;transform:scale(.8);}}

.row.top-1 .rank{box-shadow:0 0 20px rgba(255,224,117,.38),inset 0 0 16px rgba(255,224,117,.20);text-shadow:0 0 14px rgba(255,247,202,.95);}
.row.top-2 .rank{box-shadow:0 0 18px rgba(175,224,255,.35),inset 0 0 15px rgba(175,224,255,.18);text-shadow:0 0 13px rgba(227,246,255,.90);}