:root { color-scheme:dark; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; background:#02040c; color:#eefcff; }
* { box-sizing:border-box; }
body { min-width:320px; min-height:100vh; margin:0; background:radial-gradient(circle at 50% -10%,#182966 0,transparent 35%),radial-gradient(circle at 15% 50%,#28134e55,transparent 34%),#02040c; }
.leaderboard-page { width:min(1500px,calc(100% - 32px)); margin:auto; padding:22px 0 40px; }
.leaderboard-header { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #39e9ff66; padding-bottom:14px; }
.brand { display:flex; align-items:center; gap:9px; color:#e8fbff; text-decoration:none; font-weight:900; letter-spacing:.12em; }
.brand img { width:38px; height:38px; object-fit:contain; }.back-link { border:1px solid #2be9ff; padding:10px 14px; color:#8ff7ff; text-decoration:none; font-weight:800; font-size:12px; }
.leaderboard-intro { text-align:center; padding:34px 0 27px; }.leaderboard-intro p { color:#84faff; margin:0 0 8px; letter-spacing:.23em; font-size:12px; }.leaderboard-intro h1 { margin:0; color:#f2fbff; font-size:clamp(25px,4vw,48px); letter-spacing:.1em; text-shadow:0 0 18px #39e9ff99; }.leaderboard-intro span { display:block; margin-top:14px; color:#a9bccc; font-size:11px; letter-spacing:.12em; }
.tier-panel { --tier:#ffc84b; overflow:hidden; width:min(940px,100%); min-height:650px; margin:auto; border:2px solid var(--tier); border-radius:12px; background:linear-gradient(155deg,#0d1a31e8,#030711f2); box-shadow:0 0 20px color-mix(in srgb,var(--tier) 34%,transparent),inset 0 0 50px #000a; }.tier-gold { --tier:#ffc84b; }.tier-silver { --tier:#c5d9fb; }.tier-bronze { --tier:#ff8d45; }
.tier-switcher { display:flex; align-items:center; min-height:190px; padding:20px 28px; gap:20px; border-bottom:1px solid color-mix(in srgb,var(--tier) 46%,transparent); }.medal-art { display:block; background-image:url('../medals/tier-medals-v1.png'); background-repeat:no-repeat; background-size:300% auto; background-position:0 center; }.medal-art[data-tier="silver"],.medal-choice[data-tier-select="silver"] .medal-art { background-position:50% center; }.medal-art[data-tier="bronze"],.medal-choice[data-tier-select="bronze"] .medal-art { background-position:100% center; }.medal-stack { display:grid; justify-items:center; gap:7px; flex:0 0 auto; }.active-medal { width:142px; height:142px; filter:drop-shadow(0 0 12px color-mix(in srgb,var(--tier) 60%,transparent)); }.tier-copy { min-width:200px; }.tier-copy p { margin:0 0 8px; color:#ebe3ff; letter-spacing:.1em; }.tier-copy h2 { margin:0; color:var(--tier); font-size:45px; text-shadow:0 0 13px color-mix(in srgb,var(--tier) 80%,transparent); }.tier-copy small { display:block; margin-top:7px; color:#91f8ff; letter-spacing:.09em; }.tier-medal-picker { display:flex; gap:8px; }.medal-choice { display:grid; gap:3px; border:0; padding:2px; background:transparent; color:#93a9bf; font:800 8px ui-monospace,monospace; letter-spacing:.05em; cursor:pointer; }.medal-choice .medal-art { width:42px; height:42px; filter:grayscale(.25) brightness(.8); }.medal-choice.active .medal-art,.medal-choice:hover .medal-art { filter:none; transform:translateY(-2px) scale(1.08); }.medal-choice.active { color:var(--tier); }
.tier-head,.tier-list li { display:grid; grid-template-columns:60px 52px minmax(0,1fr) 82px 88px 62px 66px; gap:8px; align-items:center; }.tier-head { margin:18px 24px 0; padding:0 0 10px; border-bottom:1px solid #22dfff; color:#ff73c7; font-size:10px; font-weight:900; }.tier-head span:nth-child(n+4) { text-align:right; }.tier-list { height:min(61vh,650px); min-height:390px; overflow:auto; margin:0 24px 22px; padding:0; list-style:none; scrollbar-color:var(--tier) #08101d; }.tier-list li { min-height:36px; border-bottom:1px solid #2b4a6c88; color:#e9f8ff; font-size:12px; }.tier-list li:first-child .place { color:var(--tier); font-weight:900; }.place,.flag { text-align:center; }.flag img { width:25px; height:17px; object-fit:cover; vertical-align:middle; }.flag span { font-size:19px; }.player { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.tier-list strong,.tier-list time,.tier-list li > span:nth-last-child(-n+2) { text-align:right; font-size:12px; }.tier-list .loading,.tier-list .empty { display:block; padding:34px 0; border:0; text-align:center; color:#99afc7; }.leaderboard-note { width:min(720px,100%); margin:26px auto 0; color:#c6d5e6; text-align:center; font-size:12px; line-height:1.6; }
/* The full score sheet remains available on phones: swipe sideways to see every column. */
.tier-overall { --tier:#58e9ff; }
.active-medal[data-tier="overall"] { display:grid; place-items:center; background:none; border:3px solid #58e9ff; border-radius:50%; color:#58e9ff; }
.active-medal[data-tier="overall"]::after { content:'★'; font-size:76px; text-shadow:0 0 18px #58e9ff; }
.overall-medal { display:grid; place-items:center; width:42px; height:42px; border:2px solid #58e9ff; border-radius:50%; color:#58e9ff; font-size:25px; text-shadow:0 0 12px #58e9ff; }
.tier-medal-picker .medal-choice.active { display:none; }
.tier-table-scroll { overflow-x:auto; padding:0 24px; }
.tier-table { min-width:720px; width:max-content; }
/* Keep a readable 15-character name, without allowing Player to absorb the
   entire remaining panel width and push score details far away. */
.tier-table .tier-head,.tier-table .tier-list li { grid-template-columns:42px 44px minmax(150px,170px) 68px 62px 62px 76px 52px 58px; gap:6px; }
.tier-table .tier-head { margin:18px 0 0; }
.tier-table .tier-list { margin:0 0 22px; overflow-y:auto; overflow-x:hidden; }
.tier-table .tier-list strong,.tier-table .tier-list time,.tier-table .tier-list li > span:nth-last-child(-n+5) { text-align:right; font-size:12px; }
.record-medal { font-size:9px; font-weight:900; text-align:right; }.record-medal.gold { color:#ffc84b; }.record-medal.silver { color:#c5d9fb; }.record-medal.bronze { color:#ff8d45; }
@media (max-width:700px) { .tier-switcher { min-height:0; flex-wrap:wrap; padding:18px; }.active-medal { width:105px; height:105px; }.tier-copy { min-width:0; }.tier-copy h2 { font-size:35px; }.tier-table-scroll { padding:0 11px; }.tier-table .tier-list { min-height:370px; }.tier-table .tier-list li { font-size:10px; }.tier-table .tier-list strong,.tier-table .tier-list time { font-size:10px; } }