#home-rankings-entry{position:absolute;z-index:6;right:calc(9px + (100% - 18px) / 12 - 28px + 64px);bottom:calc(92px + env(safe-area-inset-bottom,0px))}
/* The IPA ranking texture includes transparent margins; compensate without cropping. */
#home-rankings-entry>img{position:absolute;left:calc(50% + 1px);bottom:5px;width:64px;height:55px;max-width:none;object-fit:contain;transform:translateX(-50%)}
/* Align the baked-in lettering, accounting for each texture's bottom shadow. */
#home-mail-entry>img{position:absolute;left:50%;bottom:4px;transform:translateX(-50%)}
.rankings-dialog{position:fixed;inset:auto;margin:0;padding:0;max-width:none;max-height:none;min-width:0;box-sizing:border-box;border:1px solid #f0d7e0;background:#fff;color:#303640;transform:none;font:14px/1.45 "Microsoft YaHei",Arial,sans-serif;overflow:hidden;box-shadow:0 12px 36px #17203833}
.rankings-dialog[open]{display:flex;flex-direction:column}
.rankings-dialog::backdrop{background:#17203888}
.rankings-dialog *{box-sizing:border-box}
.rankings-dialog button{font:inherit;color:#e95082;background:#fff;border:1px solid #f4b7ca;cursor:pointer;touch-action:manipulation}
.rankings-dialog button:disabled{opacity:.55;cursor:default}
.rankings-dialog button:focus-visible,.rankings-scroll:focus-visible{outline:2px solid #ef6f9b;outline-offset:-2px}
.rankings-header{display:flex;align-items:center;gap:8px;padding:12px;flex-shrink:0;border-bottom:1px solid #f1e7eb}
.rankings-header h2{flex:1;min-width:0;text-align:center;margin:0;font-size:21px;line-height:1.2}
.rankings-header button{padding:7px 10px;min-height:36px;white-space:nowrap}
.rankings-tabs{display:flex;gap:6px;padding:10px 12px 0;flex-shrink:0}
.rankings-tabs button{flex:1;min-width:0;min-height:36px;padding:6px 2px;border-color:#e6e8ec;color:#7d8491}
.rankings-tabs button[aria-pressed=true]{border-color:#f17ba4;background:#fff4f8;color:#e34c81;font-weight:700}
.rankings-summary{margin:9px 12px;font-size:12px;color:#88909d;flex-shrink:0}
.rankings-scroll{flex:1;min-height:0;padding:0 10px 10px;overflow:auto;overscroll-behavior:contain;overflow-anchor:none;scrollbar-width:none}
.rankings-scroll::-webkit-scrollbar{display:none;width:0;height:0}
.rankings-rows{display:flex;flex-direction:column;gap:7px}
.rankings-dialog .rankings-row{display:flex;align-items:center;gap:8px;width:100%;min-height:64px;padding:9px 8px;text-align:left;border:1px solid #e8e9ef;color:#303640;background:#fff;font-weight:400}
.rankings-dialog .rankings-row.is-self{background:#fff1f6;border-color:#f29bbb}
.rankings-dialog button.rankings-row:hover{background:#fff7fa}
.rankings-rank{width:24px;flex:0 0 24px;text-align:center;color:#8b92a0;font-size:14px;font-weight:700}
.rankings-rank.is-top{color:#e65588}
.rankings-avatar{display:block;flex:0 0 40px;width:40px;height:40px;object-fit:contain;background:#faf7f9;border:1px solid #f3ccdb}
.rankings-info{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0;overflow:hidden}
.rankings-name{font-size:14px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.rankings-detail{font-size:11px;color:#88909d;overflow-wrap:anywhere}
.rankings-badge{flex-shrink:0;color:#e65386;font-size:11px}
.rankings-status{font-size:12px;line-height:1.6;color:#9197a3;text-align:center;margin:10px 0;overflow-wrap:anywhere}
.rankings-status:empty{display:none}
.rankings-dialog .rankings-more{display:block;width:100%;min-height:36px;margin-top:9px;padding:7px 12px}
.rankings-dialog .rankings-more[hidden]{display:none}
.rankings-note{flex-shrink:0;margin:0;padding:9px 12px;border-top:1px solid #f1e7eb;font-size:11px;color:#969ba5;line-height:1.45}
@media(max-width:340px){.rankings-dialog .rankings-row{gap:6px;padding:8px 6px}.rankings-avatar{width:35px;height:35px;flex-basis:35px}.rankings-rank{width:20px;flex-basis:20px}}