html.ranking-open,body.ranking-open{overflow:hidden!important;height:100%}
.ranking-backdrop{align-items:stretch;justify-content:center;overflow:hidden;padding:0}
.ranking-backdrop.open{display:flex}
.ranking-backdrop::after{content:"";position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:min(100%,810px);height:78px;background:#0b1525;border-left:1px solid rgba(245,195,91,.42);border-right:1px solid rgba(245,195,91,.42);pointer-events:none;z-index:0}
.ranking-panel{width:min(100%,810px);height:calc(100dvh - 78px);max-height:calc(100dvh - 78px);position:relative;z-index:1;background:#0b1525;border:1px solid rgba(245,195,91,.42);border-radius:0;overflow:hidden;box-shadow:0 30px 90px rgba(0,0,0,.65);display:flex;flex-direction:column}
.ranking-panel::after{content:"";position:absolute;left:0;right:0;bottom:0;height:48px;background:linear-gradient(180deg,rgba(12,20,32,0),#0c1420 62%,#0c1420);pointer-events:none;z-index:2}
body.ranking-open .bottom-nav{display:grid!important;visibility:visible!important;opacity:1!important;position:fixed!important;z-index:999!important;left:50%!important;right:auto!important;bottom:0!important;top:auto!important;transform:translateX(-50%)!important;width:min(100%,810px)!important;max-width:810px!important;margin:0!important}
.ranking-bottom-nav{position:fixed;z-index:1001;left:50%;bottom:0;transform:translateX(-50%);width:min(100%,810px);height:118px;padding:13px 28px 12px;display:grid;grid-template-columns:repeat(3,1fr);background:rgba(20,7,4,.96);border:2px solid rgba(216,162,47,.78);border-bottom:0;border-radius:22px 22px 0 0;box-shadow:inset 0 0 0 1px rgba(255,231,157,.13),0 -8px 24px rgba(0,0,0,.3)}
.ranking-bottom-nav button{min-width:0;border:0;border-radius:16px;background:none;color:#f5c35b;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px}
.ranking-bottom-nav button.active{background:linear-gradient(145deg,rgba(72,35,12,.96),rgba(44,18,7,.96));border:1px solid rgba(245,195,91,.85);box-shadow:inset 0 0 22px rgba(245,195,91,.12)}
.ranking-bottom-nav svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ranking-bottom-nav b{font-size:16px;line-height:1.1}
body.ranking-open .app-shell>.bottom-nav{display:none!important}
.ranking-scroll{flex:1;min-height:0;overflow:auto;background:#0c1420;scrollbar-width:none;-ms-overflow-style:none}
.ranking-scroll::-webkit-scrollbar{width:0;height:0}
.ranking-logo-strip{height:86px;display:flex;align-items:center;justify-content:center;gap:14px;background:#020814 url("assets/xiaoxiao-header-bg.png?v=clean3") center/cover no-repeat;border-bottom:4px solid #d8a22f}
.ranking-logo-mark{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;overflow:hidden;filter:drop-shadow(0 4px 14px rgba(0,0,0,.35))}
.ranking-logo-mark img{width:100%;height:100%;object-fit:contain;display:block}
.ranking-logo-text{font-weight:900;font-size:27px;letter-spacing:.2px;color:#f6cb68;text-shadow:0 1px 7px rgba(246,203,104,.28)}
.ranking-hero{position:relative;padding:40px 34px 32px;text-align:center;background:radial-gradient(circle at 50% 0,#173a6c,#0a182d 65%)}
.ranking-hero h2{font-size:32px;margin:8px 0;color:#fff}
.ranking-hero p{color:#8fa0b7;margin:0 0 22px;font-size:13px}
.ranking-hero-actions{position:absolute;right:18px;top:18px;display:flex;align-items:center;gap:12px;z-index:2}
.ranking-play-now{display:inline-flex;align-items:center;justify-content:center;min-width:134px;height:45px;padding:0 23px;border-radius:24px;background:linear-gradient(180deg,#f3bc23,#d79a00);color:#0b0b0b;text-decoration:none;font-size:18px;font-weight:900;box-shadow:0 7px 16px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.35)}
.ranking-info-btn{width:34px;height:34px;border:3px solid rgba(255,255,255,.82);border-radius:50%;background:rgba(0,0,0,.2);color:#fff;font-size:22px;font-family:Georgia,serif;font-weight:900;line-height:1;display:grid;place-items:center;padding:0}
.report-link{display:inline-block;text-decoration:none}
.ranking-tabs{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:18px 24px 10px;background:#0c1420}
.ranking-tabs button{border:0;border-radius:9px;padding:13px;background:#252a31;color:#aeb8c6;font-weight:800}
.ranking-tabs button.active{background:linear-gradient(120deg,#244a9b,#3f66c7);color:#fff}
.rank-pane{display:none;background:#0c1420;min-height:380px}.rank-pane.active{display:block}
.report-action{text-align:center;padding:16px 24px 6px}.report-action .report-link{display:inline-block;text-decoration:none}
.empty-ranking{min-height:380px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:35px;color:#8996a9}
.empty-icon{width:108px;height:108px;border-radius:50%;display:grid;place-items:center;background:#f3f5f8;color:#9aa4b3;margin-bottom:25px}
.empty-icon svg{width:58px;height:58px;fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.empty-ranking h3{color:#aab3c1;font-size:25px;margin:0 0 10px}.empty-ranking p{font-size:15px;margin:0}.empty-ranking small{margin-top:18px;color:#65758b}
.ranking-head{display:grid;grid-template-columns:64px 1fr 95px;margin:0 24px;padding:16px 15px;background:linear-gradient(90deg,#14325b,#75869c);border:1px solid #1397e8;color:#fff;font-size:18px;font-weight:800}
.ranking-head span:last-child{text-align:right}
.coin-head{font-size:27px;line-height:1}
.ranking-list{padding:8px 24px 58px;background:#0c1420}
.rank-row{min-height:70px;display:grid;grid-template-columns:64px 1fr 95px;align-items:center;padding:10px 15px;border-bottom:1px solid rgba(255,255,255,.09)}
.rank-row>strong{font-size:25px;color:var(--gold)}
.rank-row div b,.rank-row div small{display:block}.rank-row div small{color:#9ba8ba;margin-top:4px;font-size:11px}
.rank-row em{font-style:italic;text-align:right;color:var(--gold);font-size:21px}
.rank-row.first em,.rank-row.second em,.rank-row.third em{font-size:21px;font-weight:400;line-height:1;font-style:italic}
.rank-row.empty-slot{min-height:58px;opacity:.72}.rank-row.empty-slot div{min-height:25px}.rank-row.empty-slot em{font-size:21px;font-weight:400;line-height:1;font-style:italic}
.rank-row.first,.rank-row.second,.rank-row.third{border:0;border-radius:10px;margin-bottom:8px}
.rank-row.first{background:linear-gradient(90deg,#704000,#b86d00)}.rank-row.second{background:linear-gradient(90deg,#3d3d3d,#767676)}.rank-row.third{background:linear-gradient(90deg,#4e251a,#803b28)}
.rank-row.first>strong,.rank-row.second>strong,.rank-row.third>strong{width:39px;height:39px;border-radius:50%;display:grid;place-items:center;background:var(--gold);color:#392300;font-size:19px}
.rank-row.second>strong{background:#d9dde3;color:#4a4f57}.rank-row.third>strong{background:#df875c;color:#4b2012}
.my-rank-dock{position:fixed;left:50%;bottom:82px;transform:translateX(-50%);z-index:79;width:min(100%,810px);padding:12px 24px 14px;background:linear-gradient(90deg,rgba(40,65,98,.78) 0%,rgba(34,55,82,.36) 9%,rgba(34,55,82,.36) 91%,rgba(40,65,98,.78) 100%);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);pointer-events:none}
.my-rank-row{pointer-events:auto;border:2px solid rgba(120,143,196,.9);border-radius:17px;background:linear-gradient(90deg,#65370f,#9b5808);box-shadow:0 0 28px rgba(66,101,168,.28);margin:0;min-height:76px}
.my-rank-row>strong{font-size:25px;color:var(--gold)}
.my-rank-row div b::before{content:"Me";display:inline-grid;place-items:center;min-width:34px;height:24px;margin-right:8px;padding:0 7px;border-radius:13px;background:rgba(255,255,255,.55);color:#fff;font-size:14px;font-weight:900;vertical-align:middle}
.my-rank-row em{color:var(--gold);font-size:25px}
.ranking-note{margin:0;padding:0 32px 25px;background:#0c1420;color:#64758c;text-align:center;font-size:10px}
@media(max-width:600px){.ranking-backdrop{padding:0}.ranking-panel{border-radius:0}.ranking-logo-strip{height:72px}.ranking-logo-mark{width:42px;height:42px}.ranking-logo-text{font-size:20px}.ranking-hero{padding:32px 17px 24px}.ranking-hero h2{font-size:26px}.ranking-tabs,.ranking-list{padding-left:10px;padding-right:10px}.ranking-head{margin:0 10px}.ranking-head,.rank-row{grid-template-columns:48px 1fr 76px;padding-left:10px;padding-right:10px}.rank-row em{font-size:16px}.ranking-note{padding-left:15px;padding-right:15px}.my-rank-dock{width:100%;bottom:80px;padding:10px 10px 12px}.my-rank-row{min-height:70px}}
@media(max-width:600px){body.ranking-open .bottom-nav{left:0!important;right:0!important;transform:none!important;width:100%!important;max-width:none!important;height:calc(76px + env(safe-area-inset-bottom))!important}}
@media(max-width:600px){.ranking-bottom-nav{left:0;right:0;transform:none;width:100%;height:calc(76px + env(safe-area-inset-bottom));padding:7px 18px max(7px,env(safe-area-inset-bottom));border-radius:17px 17px 0 0}.ranking-bottom-nav button{gap:2px;border-radius:12px}.ranking-bottom-nav svg{width:24px;height:24px}.ranking-bottom-nav b{font-size:13px}}
@media(min-width:900px){.ranking-panel{height:calc(156.25dvh - 118px);max-height:calc(156.25dvh - 118px)}.ranking-backdrop::after{height:118px}.my-rank-dock{bottom:118px}}