/* tops-2: open stage, compact selectors, independent rows. Shared site typography/bevels. */
.tops-page{min-height:100vh;background:radial-gradient(ellipse at 90% 0,#3b111620,transparent 50%),var(--bg)}
.tops-shell{max-width:1024px;padding:0 32px;margin:auto}
.tops-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:24px 0;border-bottom:1px solid #3a2429}
.tops-brand{font:18px var(--display)}.tops-brand small{display:block;margin-top:4px;font:10px var(--mono);letter-spacing:.08em;color:var(--muted)}
.tops-skip{position:fixed;left:16px;top:-90px;z-index:20;padding:12px;background:var(--surface)}.tops-skip:focus{top:12px}
.tops-intro{display:flex;align-items:end;justify-content:space-between;gap:24px;margin:36px 0 24px}.tops-eyebrow{font:11px/1.5 var(--mono);letter-spacing:.08em;color:var(--muted);margin-bottom:12px}.tops-eyebrow>span:first-child{color:#e8b775}.tops-eyebrow>span[aria-hidden]{margin:0 10px;color:#75605f}.tops-intro h1{font-size:clamp(28px,3.5vw,38px)}.tops-intro h1>span{color:var(--red)}.tops-intro__detail{font-size:12px;color:var(--muted);padding-bottom:5px}
.tops-categories{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:0 0 28px}
.tops-category{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 13px;background:var(--bev-soft),var(--surface);clip-path:var(--px-4);cursor:pointer;transition:background-color .15s}
.tops-category svg{width:17px;height:17px;flex-shrink:0;color:var(--top-soft)}.tops-category strong{font:500 12px/1.4 var(--font)}.tops-category small{display:none}.tops-category:hover{background-color:var(--top-deep)}.tops-category[aria-current=true]{background:var(--bev-soft),var(--top-deep);color:var(--top-soft)}.tops-category[aria-current=true]:after{position:absolute;content:'';height:3px;left:10px;right:10px;bottom:0;background:var(--top-accent)}.tops-category:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--top-soft)}
.tops-ranking{scroll-margin-top:16px}.tops-ranking__head{display:flex;align-items:center;justify-content:space-between;gap:16px}.tops-ranking h2{font-size:22px}.tops-ranking__head p{font-size:12px;color:var(--muted);margin-top:6px}.tops-count{font:11px var(--mono);color:var(--muted);white-space:nowrap}
.tops-scene{position:relative;width:100%;height:410px;margin-top:8px;isolation:isolate;background:radial-gradient(ellipse 45% 50% at 50% 65%,var(--top-glow),transparent 85%)}
.tops-scene__canvas{display:block;width:100%;height:100%;touch-action:pan-y;outline-offset:-4px;opacity:0;transition:opacity .2s}.tops-scene.is-ready .tops-scene__canvas{opacity:1}
.tops-nametag{position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:center;gap:5px;max-width:28%;padding:8px 12px 9px;background:#0c090bd9;clip-path:var(--px-4);color:var(--text);opacity:0;transition:opacity .2s;pointer-events:none;z-index:2}.is-ready .tops-nametag{opacity:1}.tops-nametag__place{font:9px/1.4 var(--mono);letter-spacing:.07em;color:#ffd879}.tops-nametag--2 .tops-nametag__place{color:#d4e1ec}.tops-nametag--3 .tops-nametag__place{color:#f0af85}.tops-nametag strong{font:600 14px/1.4 var(--font);max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.tops-nametag__value{font:11px/1.5 var(--mono);color:var(--top-soft);white-space:nowrap}.tops-nametag.is-match{background:var(--top-deep);box-shadow:inset 0 -2px var(--top-accent)}
.tops-scene-tools{display:flex;align-items:center;justify-content:space-between;min-height:32px;margin:-10px 0 8px;gap:16px}.tops-scene-hint{font-size:11px;color:var(--muted)}.tops-motion{margin-left:auto;min-height:44px;padding:8px 0 8px 12px;font-size:11px;color:var(--muted);cursor:pointer}.tops-motion:before{content:'Ⅱ';margin-right:7px;color:var(--top-soft)}.tops-motion[aria-pressed=true]:before{content:'▷'}
.tops-flat{display:flex;align-items:end;justify-content:center;gap:8px;width:100%;height:100%;padding:44px 18px 24px}.tops-flat-player{width:28%;max-width:210px;min-width:0;text-align:center;display:flex;flex-direction:column;position:relative}.tops-flat-player--1{--step-h:100px;--step-color:#9c7422;--step-top:#f0cb66;--rank-color:#ffdd8f}.tops-flat-player--2{--step-h:70px;--step-color:#677882;--step-top:#bdcbd4;--rank-color:#e3edf3}.tops-flat-player--3{--step-h:48px;--step-color:#8e5037;--step-top:#d59169;--rank-color:#f4b997}.tops-flat-player img{height:175px;width:100%;object-fit:contain;image-rendering:pixelated}.tops-flat-label{display:flex;align-items:center;flex-direction:column;gap:4px;min-height:54px;margin-bottom:12px}.tops-flat-label strong{font-size:13px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tops-flat-label small{font:10px var(--mono);color:var(--top-soft)}.tops-flat-step{height:var(--step-h);position:relative;padding:14px 0;background:var(--bev),var(--step-color);color:var(--rank-color);font:26px var(--display);clip-path:polygon(0 9px,9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%)}.tops-flat-step:before{position:absolute;content:'';top:0;left:0;right:0;height:9px;background:var(--step-top)}
.tops-scene.is-empty{height:225px;background:radial-gradient(ellipse 45% 70% at 50% 70%,var(--top-glow),transparent 85%)}.tops-scene.is-empty .tops-flat{max-width:580px;margin:auto;padding-top:30px}.tops-scene.is-empty .tops-flat-step{opacity:.4}.tops-empty-slot{height:55px;display:grid;place-items:center;font:20px var(--mono);color:var(--muted)}
.tops-notice{font-size:13px;line-height:1.6;color:#c6b3ac;text-align:center;margin:12px auto 20px;max-width:62ch}.tops-notice:empty{display:none}.tops-retry{display:flex;margin:0 auto 24px}
.tops-listbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:22px;margin:0 0 16px;border-top:1px solid #3b272c}.tops-listbar h3{font:600 16px var(--font)}.tops-listbar h3 span{display:block;font:11px var(--font);color:var(--muted);margin-top:5px}.tops-search{display:flex;align-items:center;gap:8px;width:228px;max-width:100%;min-height:44px;padding:0 12px;clip-path:var(--px-4);background:var(--inset);box-shadow:inset 0 -2px #5a3e46}.tops-search:focus-within{box-shadow:inset 0 -2px var(--top-accent)}.tops-search svg{width:17px;flex-shrink:0;color:var(--muted)}.tops-search input{font:13px var(--font);color:var(--text);width:100%;min-width:0;min-height:44px;border:0;background:none;outline:0}.tops-search input::placeholder{color:#b19b95}
.tops-rows{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}.tops-row{display:grid;grid-template-columns:40px 42px minmax(0,1fr) auto;gap:16px;align-items:center;min-height:70px;padding:12px 18px;background:var(--surface);clip-path:var(--px-6)}.tops-row:hover{background:var(--surface-2)}.tops-row__rank{font:600 15px var(--mono);text-align:center;color:#ad9991}.tops-row__head{width:42px;height:42px;image-rendering:pixelated;background:#31202a;clip-path:var(--px-4)}.tops-row__name{font:600 15px var(--font);overflow-wrap:anywhere;min-width:0}.tops-row__value{font:500 13px var(--mono);color:var(--top-soft);white-space:nowrap}
.tops-list-empty{text-align:center;font-size:13px;line-height:1.6;color:var(--muted);padding:24px 8px}.tops-pagination{display:flex;align-items:center;justify-content:center;gap:16px;margin:24px 0}.tops-pagination span{font:12px var(--mono)}.tops-pagination button:disabled{opacity:.4;cursor:not-allowed}.tops-ranking__foot{display:flex;align-items:start;justify-content:space-between;gap:16px;margin-top:20px;font-size:11px;line-height:1.5;color:var(--muted)}.tops-about{max-width:55%;text-align:right}.tops-about summary{min-height:44px;margin-top:-12px;padding:12px 0;cursor:pointer}.tops-about p{padding:8px 0 16px;font-size:12px;line-height:1.6}
.tops-link-note{display:flex;align-items:center;justify-content:space-between;gap:24px;border-top:1px solid #3b272c;margin:28px 0 32px;padding-top:24px}.tops-link-note h2{font:600 15px var(--font);margin-bottom:6px}.tops-link-note p{font-size:12px;line-height:1.6;color:var(--muted)}.tops-link-note .btn{flex-shrink:0;min-height:44px}.tops-footer{display:flex;justify-content:space-between;gap:24px;margin:0 0 24px;font-size:10px;line-height:1.6;color:var(--muted)}.tops-footer>span:first-child{font-family:var(--display)}
[data-metric=playtime]{--top-accent:#3BADC5;--top-soft:#a9dce7;--top-deep:#193f4b;--top-glow:#2494b52b}
[data-metric=advancements]{--top-accent:#8b74dc;--top-soft:#C9BEFF;--top-deep:#35295b;--top-glow:#8b74dc29}
[data-metric=messages]{--top-accent:#E8405A;--top-soft:#FFB8B0;--top-deep:#571c30;--top-glow:#E8405A26}
[data-metric=walking]{--top-accent:#45A84D;--top-soft:#a7dda7;--top-deep:#25472d;--top-glow:#45A84D29}
[data-metric=elytra]{--top-accent:#3B78E0;--top-soft:#a9ceff;--top-deep:#263d68;--top-glow:#3B78E030}
[data-metric=mining]{--top-accent:#7CABBC;--top-soft:#b7dce8;--top-deep:#2b454f;--top-glow:#7CABBC29}
[data-metric=farming]{--top-accent:#E08A26;--top-soft:#FFD27A;--top-deep:#573915;--top-glow:#E08A2629}
[data-metric=trading]{--top-accent:#45A84D;--top-soft:#a7e7c0;--top-deep:#204735;--top-glow:#45A84D29}
[data-metric=survival]{--top-accent:#C58774;--top-soft:#f5bcab;--top-deep:#58352d;--top-glow:#C5877429}
@media(max-width:680px){.tops-shell{padding:0 16px}.tops-header{padding:18px 0}.tops-brand{font-size:14px}.tops-brand small{display:none}.tops-header .hud__brand{gap:8px}.tops-header .btn{font-size:12px;padding:10px;min-height:44px}.tops-intro{margin:28px 0 20px}.tops-intro__detail{display:none}.tops-intro h1{font-size:28px}.tops-categories{flex-wrap:nowrap;overflow-x:auto;max-width:100%;padding-bottom:10px;margin-bottom:20px;scrollbar-width:thin;scrollbar-color:#60404d transparent}.tops-category{flex-shrink:0;padding:10px 12px}.tops-category strong{font-size:12px}.tops-ranking h2{font-size:20px}.tops-count{font-size:10px}.tops-scene{height:340px;margin-top:0;background-size:100% 100%}.tops-nametag{max-width:29%;padding:6px 7px;gap:3px}.tops-nametag strong{font-size:11px}.tops-nametag__place{font-size:8px}.tops-nametag__value{font-size:9px}.tops-scene-hint{font-size:10px}.tops-motion{font-size:10px}.tops-listbar{gap:12px;padding-top:18px}.tops-listbar h3{font-size:14px}.tops-listbar h3 span{font-size:10px}.tops-search{width:170px}.tops-search input{font-size:12px}.tops-row{grid-template-columns:24px 34px minmax(0,1fr) auto;gap:10px;min-height:64px;padding:12px 10px}.tops-row__rank{font-size:12px}.tops-row__head{width:34px;height:34px}.tops-row__name{font-size:12px}.tops-row__value{font-size:10px}.tops-ranking__foot{font-size:10px}.tops-about{max-width:55%}.tops-about p{font-size:11px}.tops-link-note{flex-direction:column;align-items:start;gap:12px}.tops-link-note h2{font-size:14px}.tops-link-note p{font-size:12px}.tops-footer{flex-direction:column;gap:6px}.tops-flat{gap:5px;padding:30px 3px 20px}.tops-flat-player{width:31%}.tops-flat-player img{height:145px}.tops-flat-label strong{font-size:11px}.tops-flat-label small{font-size:9px}.tops-scene.is-empty{height:195px}}
@media(max-width:350px){.tops-row{gap:7px;padding:10px 6px;grid-template-columns:24px 28px minmax(0,1fr) auto}.tops-row__head{width:28px;height:28px}.tops-row__name{font-size:11px}.tops-row__value{font-size:9px}.tops-search{width:148px}.tops-nametag strong{font-size:10px}.tops-nametag__value{font-size:8px}}
@media(prefers-reduced-motion:reduce){.tops-category,.tops-nametag,.tops-scene__canvas{transition:none}}

/* Failed avatar requests must not move the name/result into another grid column. */
.tops-row__rank{grid-column:1}.tops-row__head{grid-column:2}.tops-row__name{grid-column:3}.tops-row__value{grid-column:4}

/* Keyboard navigation and search validation without changing the site palette. */
.tops-listbar{scroll-margin-top:20px}.tops-listbar h3:focus-visible{outline:1px solid var(--top-soft);outline-offset:5px}.tops-motion:focus-visible,.tops-about summary:focus-visible{outline:1px solid var(--top-soft);outline-offset:4px}.tops-search:has(input[aria-invalid=true]){box-shadow:inset 0 -2px #ed8291}

.tops-flat-player img.is-uploaded{object-fit:contain;filter:drop-shadow(2px 3px 0 #0005)}

/* tops-4: neutral charcoal canvas + distinct mineral/forest/lilac/amber accents.
   These values are scoped to this page; the main site keeps its own theme. */
.tops-page{--bg:#101317;--bg-2:#171c23;--surface:#1b222b;--surface-2:#27303a;--raised:#303b46;--inset:#0c1015;--text:#f1eee6;--muted:#a8b2b7;background:radial-gradient(ellipse 65% 36% at 90% 0%,#2c404d55,transparent 85%),radial-gradient(ellipse 70% 25% at 0% 36%,#30443830,transparent 85%),var(--bg)}
.tops-header,.tops-listbar,.tops-link-note{border-color:#344047}.tops-eyebrow>span[aria-hidden]{color:#7c8b91}.tops-eyebrow>span:first-child{color:#e3bf80}
.tops-page .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;background-image:var(--bev),linear-gradient(180deg,#35404a,#242d36);color:#f1eee6}.tops-page .btn:active{background-image:var(--bev-press),linear-gradient(180deg,#35404a,#242d36)}
.tops-pixel-arrow{width:14px;height:14px;flex-shrink:0;display:block}.tops-pixel-arrow--right{transform:rotate(180deg)}.tops-pixel-arrow--out{transform:rotate(135deg)}
.tops-category{background:var(--bev-soft),color-mix(in srgb,var(--top-accent) 16%,#181e25);box-shadow:inset 0 -2px color-mix(in srgb,var(--top-accent) 35%,transparent)}.tops-category:hover{background:var(--bev-soft),color-mix(in srgb,var(--top-accent) 25%,#181e25)}.tops-category[aria-current=true]{background:var(--bev-soft),color-mix(in srgb,var(--top-accent) 31%,#181e25);color:var(--text)}
.tops-nametag{background:#11171cd9}.tops-nametag.is-match{background:var(--top-deep)}.tops-notice{color:#bdc8c9}.tops-search{box-shadow:inset 0 -2px #56666f}.tops-search input::placeholder{color:#a8b6bb}.tops-row__rank{color:#b7c3c7}.tops-row__head{background:#34404a}.tops-row__value{color:#c5dde2}
.tops-row{--row-accent:#7fa8bc;background:linear-gradient(90deg,#7fa8bc0b,transparent 65%),#1b252e;box-shadow:inset 3px 0 var(--row-accent)}
.tops-row:nth-child(4n+2){--row-accent:#91b99a;background:linear-gradient(90deg,#91b99a0c,transparent 65%),#1c2925}
.tops-row:nth-child(4n+3){--row-accent:#b39dc7;background:linear-gradient(90deg,#b39dc70b,transparent 65%),#26232f}
.tops-row:nth-child(4n){--row-accent:#c8ad7c;background:linear-gradient(90deg,#c8ad7c0b,transparent 65%),#2b2720}
.tops-row:hover{filter:brightness(1.13)}.tops-row__rank{color:var(--row-accent)}.tops-row__value{color:color-mix(in srgb,var(--row-accent) 55%,#fff5e8)}
.tops-link-note{padding:24px 20px 20px;background:linear-gradient(110deg,#263b333d,#29334028);clip-path:var(--px-6)}.tops-link-note h2{color:#c6dccb}
/* Non-WebGL and empty states also use single, unsquashed blocks. */
.tops-flat-player--1{--step-h:100px}.tops-flat-player--2{--step-h:92px}.tops-flat-player--3{--step-h:84px}
.tops-flat-step{width:var(--step-h);height:var(--step-h);max-width:100%;align-self:center;background-image:var(--block-image);background-size:100% 100%;background-color:var(--step-color);image-rendering:pixelated;clip-path:none;padding-top:24px;color:#f6e9ce;text-shadow:2px 2px #0008}.tops-flat-step:before{display:none}.tops-flat-player--1{--block-image:url('/images/podium/gold.png')}.tops-flat-player--2{--block-image:url('/images/podium/silver.png')}.tops-flat-player--3{--block-image:url('/images/podium/copper.png')}
@media(max-width:680px){.tops-flat-player--1{--step-h:92px}.tops-flat-player--2{--step-h:84px}.tops-flat-player--3{--step-h:76px}.tops-link-note{padding:20px 16px}.tops-nametag{background:#11171ce8}}

/* tops-5: inventory-style item buttons; only the selected item has a label. */
.tops-categories{flex-wrap:nowrap;align-items:center;gap:8px;padding:4px 2px 10px;margin-bottom:24px;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#52636e transparent}
.tops-category{flex:0 0 auto;width:58px;height:58px;min-height:58px;padding:9px;gap:0;clip-path:var(--px-6);background:linear-gradient(180deg,#ffffff14 0 3px,#0000 3px calc(100% - 6px),#0007 calc(100% - 6px)),linear-gradient(125deg,color-mix(in srgb,var(--top-accent) 25%,#313d45),color-mix(in srgb,var(--top-accent) 9%,#171d25));box-shadow:inset 2px 0 #ffffff0e,inset -2px 0 #0005;filter:drop-shadow(0 3px 0 #070b10);transition:transform .15s,filter .15s}
.tops-category:before{content:'';position:absolute;inset:5px;border:1px solid #ffffff0a;pointer-events:none;clip-path:var(--px-4)}
.tops-category__icon{width:40px;height:40px;object-fit:contain;flex-shrink:0;image-rendering:pixelated;filter:drop-shadow(1px 3px 0 #0007);pointer-events:none}
.tops-category strong{display:none;font:500 13px/1.4 var(--font);white-space:nowrap;color:var(--text);text-shadow:0 2px #0006}
.tops-category:hover{transform:translateY(-2px);filter:brightness(1.12) drop-shadow(0 5px 0 #070b10);background:linear-gradient(180deg,#ffffff1a 0 3px,#0000 3px calc(100% - 6px),#0007 calc(100% - 6px)),linear-gradient(125deg,color-mix(in srgb,var(--top-accent) 34%,#313d45),color-mix(in srgb,var(--top-accent) 16%,#171d25))}
.tops-category[aria-current=true]{width:auto;padding:9px 16px 9px 10px;gap:10px;background:linear-gradient(180deg,#ffffff26 0 3px,#0000 3px calc(100% - 6px),#0007 calc(100% - 6px)),linear-gradient(125deg,color-mix(in srgb,var(--top-accent) 42%,#313d45),color-mix(in srgb,var(--top-accent) 23%,#171d25));box-shadow:inset 2px 0 #ffffff18,inset -2px 0 #0005}
.tops-category[aria-current=true] strong{display:block}.tops-category[aria-current=true]:after{height:2px;left:8px;right:8px;bottom:4px;background:var(--top-soft);box-shadow:0 -1px 8px var(--top-accent)}
.tops-category:focus-visible{box-shadow:inset 0 0 0 2px var(--top-soft)}.tops-category:active{transform:translateY(2px);filter:brightness(.96)}
@media(max-width:680px){.tops-categories{gap:8px;margin-bottom:22px;padding-bottom:12px}.tops-category{width:56px;height:56px;min-height:56px;padding:8px}.tops-category[aria-current=true]{padding:8px 14px 8px 9px;gap:8px}.tops-category strong{font-size:12px}}
@media(prefers-reduced-motion:reduce){.tops-category{transition:none}}

/* tops-7: quiet Millida-like row structure; pixel typography follows the supplied nametag. */
@font-face{font-family:'Monocraft';src:url('/fonts/Monocraft.woff') format('woff');font-style:normal;font-weight:400;font-display:swap}
.tops-page{--pixel:'Monocraft',monospace}
.tops-rows{gap:6px;padding:0}
.tops-row,.tops-row:nth-child(4n+2),.tops-row:nth-child(4n+3),.tops-row:nth-child(4n){min-height:76px;padding:12px 18px;background-image:none;box-shadow:none;border:0;filter:none;transition:background-color .15s;transform:none;clip-path:var(--px-6)}
.tops-row:before,.tops-row:after{display:none}.tops-row:hover{filter:brightness(1.06);transform:none}
.tops-row__rank{display:block;justify-self:stretch;width:auto;min-height:0;padding:0;background:none;box-shadow:none;clip-path:none;font:400 16px/1.5 var(--pixel);color:#9eabb1;text-shadow:none}
.tops-row__head{padding:0;background:transparent;box-shadow:none;border:none;clip-path:none}
.tops-row__name{font:400 16px/1.5 var(--pixel);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal;text-shadow:1px 1px #0006}
.tops-row__value{padding:0;background:none;clip-path:none;box-shadow:none;font:400 16px/1.5 var(--pixel);text-shadow:1px 1px #0005;color:#d2dfdf}
.tops-nametag strong{font:400 16px/1.5 var(--pixel);text-shadow:1px 1px #0008}.tops-nametag__value{font:400 12px/1.5 var(--pixel)}
.tops-category strong{font-family:var(--pixel);font-size:16px;font-weight:400;line-height:1.5;text-shadow:1px 1px #0008}
@media(max-width:680px){.tops-row,.tops-row:nth-child(4n+2),.tops-row:nth-child(4n+3),.tops-row:nth-child(4n){min-height:68px;padding:12px 10px;gap:10px}.tops-row__rank{font-size:14px}.tops-row__name{font-size:16px}.tops-row__value{font-size:14px}.tops-nametag{max-width:24%;padding:6px 4px}.tops-nametag strong{font-size:12px}.tops-nametag__value{font-size:10px}.tops-category strong{font-size:14px}}
@media(max-width:350px){.tops-row,.tops-row:nth-child(4n+2),.tops-row:nth-child(4n+3),.tops-row:nth-child(4n){padding:10px 6px;gap:7px}.tops-row__name,.tops-row__rank{font-size:14px}.tops-row__value{font-size:12px}}
@media(prefers-reduced-motion:reduce){.tops-row{transition:none}}
/* Keep projected nametags inside the scene during viewport resize as well. */
.tops-scene{overflow:hidden}

/* tops-8: conceal intermediate DOM/model frames behind a pixel loading ring. */
.tops-ranking{position:relative;min-height:380px}.tops-loader{position:absolute;inset:0 0 auto;min-height:360px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;color:#c3d5db;font:14px/1.5 var(--pixel);z-index:5}.tops-loader[hidden]{display:none}.tops-ranking.is-loading>:not(.tops-loader){visibility:hidden;pointer-events:none}.tops-loader__ring{display:block;width:48px;height:48px;background:conic-gradient(from 0deg,#95c5d8,#95c5d820 78%,transparent 80%);clip-path:polygon(33.33% 0,66.67% 0,66.67% 16.67%,83.33% 16.67%,83.33% 33.33%,100% 33.33%,100% 66.67%,83.33% 66.67%,83.33% 83.33%,66.67% 83.33%,66.67% 100%,33.33% 100%,33.33% 83.33%,16.67% 83.33%,16.67% 66.67%,0 66.67%,0 33.33%,16.67% 33.33%,16.67% 16.67%,33.33% 16.67%);mask:linear-gradient(#000 0 0) top/100% 8px no-repeat,linear-gradient(#000 0 0) bottom/100% 8px no-repeat,linear-gradient(#000 0 0) left/8px 100% no-repeat,linear-gradient(#000 0 0) right/8px 100% no-repeat,conic-gradient(#000 0 0);mask-composite:add;animation:tops-spin .95s steps(8,end) infinite;position:relative}.tops-loader__ring:after{content:'';position:absolute;inset:12px;background:var(--bg);clip-path:polygon(25% 0,75% 0,75% 25%,100% 25%,100% 75%,75% 75%,75% 100%,25% 100%,25% 75%,0 75%,0 25%,25% 25%)}.tops-ranking.is-revealing>:not(.tops-loader){animation:tops-reveal .2s ease-out both}@keyframes tops-spin{to{transform:rotate(360deg)}}@keyframes tops-reveal{from{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.tops-loader__ring{animation:none}.tops-ranking.is-revealing>:not(.tops-loader){animation:none}}

/* ===== tops-9: единый accent-цвет категории, строки-ранги с полоской «до рекорда», оправа головы, усиленная иерархия ===== */
/* Заголовок рейтинга: акцентная черта под H2 и счётчик-пилюля */
.tops-ranking h2{font-size:24px;position:relative;display:inline-block;padding-bottom:8px}
.tops-ranking h2::after{content:"";position:absolute;left:0;bottom:0;width:46px;height:3px;background:var(--top-accent);box-shadow:0 0 8px color-mix(in srgb,var(--top-accent) 60%,transparent)}
.tops-count{padding:5px 11px;background:color-mix(in srgb,var(--top-accent) 15%,#161b22);clip-path:var(--px-4);color:color-mix(in srgb,var(--top-soft) 80%,#fff);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--top-accent) 32%,transparent)}

/* Таблички над пьедесталом — в цветах медалей (золото/серебро/медь), значение подсвечено */
.tops-nametag--1{background:linear-gradient(180deg,#2b2210f2,#14110ad9);box-shadow:inset 0 0 0 2px #e8c35a5c,0 6px 16px #0007}
.tops-nametag--1 .tops-nametag__value{color:#ffd877}
.tops-nametag--2{background:linear-gradient(180deg,#212831f2,#121519d9);box-shadow:inset 0 0 0 2px #c8d2dc4d,0 6px 16px #0007}
.tops-nametag--2 .tops-nametag__value{color:#dbe6f1}
.tops-nametag--3{background:linear-gradient(180deg,#2b1f13f2,#15100ad9);box-shadow:inset 0 0 0 2px #cf945c4d,0 6px 16px #0007}
.tops-nametag--3 .tops-nametag__value{color:#f2b885}
.tops-nametag__place{letter-spacing:.06em;opacity:.85}
.tops-page .tops-nametag.is-match{background:var(--top-deep);box-shadow:inset 0 0 0 2px var(--top-accent),0 6px 16px #0007}

/* Строки списка: единый цвет активной категории вместо радуги, рельеф-слот и полоска ранга */
.tops-page .tops-row,
.tops-page .tops-row:nth-child(4n+2),
.tops-page .tops-row:nth-child(4n+3),
.tops-page .tops-row:nth-child(4n){--row-accent:var(--top-accent);position:relative;overflow:hidden;
 grid-template-columns:34px 46px minmax(0,1fr) auto;gap:14px;min-height:62px;padding:11px 18px;
 background:linear-gradient(90deg,color-mix(in srgb,var(--top-accent) 11%,transparent),transparent 58%),var(--surface);
 box-shadow:inset 3px 0 var(--top-accent),inset 0 0 0 1px #ffffff0a;
 transition:transform .14s ease,box-shadow .14s ease}
.tops-page .tops-row:nth-child(even){background:linear-gradient(90deg,color-mix(in srgb,var(--top-accent) 8%,transparent),transparent 58%),var(--bg-2)}
.tops-row::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:calc(var(--fill,0) * 100%);
 background:linear-gradient(90deg,color-mix(in srgb,var(--top-accent) 35%,transparent),var(--top-accent));
 box-shadow:0 0 7px color-mix(in srgb,var(--top-accent) 55%,transparent);pointer-events:none;transition:width .55s cubic-bezier(.2,.8,.2,1)}
.tops-row__rank{grid-column:1;justify-self:center;font:400 15px/1 var(--pixel);color:color-mix(in srgb,var(--top-soft) 80%,#fff);opacity:.92;text-shadow:1px 1px #0006}
.tops-row__pic{grid-column:2;position:relative;width:44px;height:44px;display:grid;place-items:center;background:#10151b;clip-path:var(--px-4);
 box-shadow:inset 0 0 0 2px #0b0e12,inset 0 0 0 3px color-mix(in srgb,var(--top-accent) 42%,#2a333c)}
.tops-row__head{width:36px;height:36px;background:transparent;box-shadow:none;border:0;clip-path:none;image-rendering:pixelated}
.tops-row__name{grid-column:3;font:400 16px/1.4 var(--pixel);color:#eef0ea;text-shadow:1px 1px #0007;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tops-row__value{grid-column:4;justify-self:end;font:400 16px/1.2 var(--pixel);font-variant-numeric:tabular-nums;color:color-mix(in srgb,var(--top-soft) 68%,#fff6ea);text-shadow:1px 1px #0006;white-space:nowrap}
@media(hover:hover){.tops-row:hover{transform:translateX(3px);box-shadow:inset 4px 0 var(--top-soft),inset 0 0 0 1px #ffffff14;z-index:1}.tops-row:hover .tops-row__pic{box-shadow:inset 0 0 0 2px #0b0e12,inset 0 0 0 3px color-mix(in srgb,var(--top-soft) 60%,#2a333c)}}

@media(max-width:680px){
 .tops-ranking h2{font-size:21px}
 .tops-page .tops-row,.tops-page .tops-row:nth-child(4n+2),.tops-page .tops-row:nth-child(4n+3),.tops-page .tops-row:nth-child(4n){grid-template-columns:30px 40px minmax(0,1fr) auto;gap:10px;min-height:60px;padding:11px 12px}
 .tops-row__pic{width:40px;height:40px}.tops-row__head{width:32px;height:32px}
 .tops-row__name{font-size:15px}.tops-row__value{font-size:14px}.tops-row__rank{font-size:14px}}
@media(max-width:350px){
 .tops-page .tops-row,.tops-page .tops-row:nth-child(4n+2),.tops-page .tops-row:nth-child(4n+3),.tops-page .tops-row:nth-child(4n){grid-template-columns:24px 34px minmax(0,1fr) auto;gap:7px;padding:10px 7px}
 .tops-row__pic{width:34px;height:34px}.tops-row__head{width:28px;height:28px}
 .tops-row__name{font-size:13px}.tops-row__value{font-size:12px}.tops-row__rank{font-size:13px}}
@media(prefers-reduced-motion:reduce){.tops-row,.tops-row::after{transition:none}}