/* Shared desktop / tablet / phone ranking. One scroll region, no private traffic UI. */
#rankModal .ranking-v4{--rk-bg:#16191c;--rk-panel:#22272a;--rk-text:#f1f2ef;--rk-muted:#aeb4ba;--rk-border:rgba(255,255,255,.13);--rk-gold:#e8c76c;--rk-selected:#f1f2ee;--rk-selected-text:#202427;position:relative;display:block!important;width:min(960px,calc(100vw - 48px))!important;max-width:960px!important;max-height:calc(100dvh - 64px)!important;min-height:0!important;padding:0!important;margin:auto!important;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#60686e transparent;border:1px solid var(--rk-border)!important;border-radius:26px!important;background:radial-gradient(ellipse at 10% 0,rgba(99,117,124,.14),transparent 46%),var(--rk-bg)!important;color:var(--rk-text)!important;box-shadow:0 25px 90px #0006;line-height:1.5;container-type:inline-size}
#rankModal .ranking-v4 *{box-sizing:border-box}
#rankModal .ranking-v4 [hidden]{display:none!important}
#rankModal .ranking-v4 button,#rankModal .ranking-v4 select{font:inherit}
#rankModal .ranking-v4 button{min-height:44px;border:0;border-radius:24px;background:transparent;color:var(--rk-muted);padding:9px 16px;cursor:pointer;transition:background .15s,color .15s}
#rankModal .ranking-v4 button:hover{background:rgba(255,255,255,.08);color:var(--rk-text)}
#rankModal .ranking-v4 :is(button,select,a):focus-visible{outline:2px solid var(--rk-gold);outline-offset:3px}
#rankModal .ranking-v4 .rk-close{position:absolute!important;top:20px!important;right:22px!important;width:42px;height:42px;min-height:42px;padding:0!important;font-size:26px!important;line-height:1;border:1px solid var(--rk-border);border-radius:50%!important;background:rgba(255,255,255,.045);z-index:5;color:var(--rk-muted)}
#rankModal .rk-header{padding:28px 80px 22px 30px;border-bottom:1px solid var(--rk-border)}
#rankModal .rk-eyebrow{font-size:10px;letter-spacing:2.2px;font-weight:500;color:var(--rk-muted)}
#rankModal .rk-header h2{font-size:30px;line-height:1.2;letter-spacing:.5px;margin:8px 0 7px;font-weight:650;color:var(--rk-text)}
#rankModal .rk-header p{margin:0;font-size:12px;color:var(--rk-muted)}
#rankModal .rk-controls{padding:17px 30px 0}
#rankModal .rk-media{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:17px}
#rankModal .rk-media button{font-size:14px;min-width:86px}
#rankModal .rk-media button.is-active{background:rgba(255,255,255,.11);color:var(--rk-text);box-shadow:inset 0 0 0 1px var(--rk-border)}
#rankModal .rk-sources{display:flex;flex-wrap:wrap;width:fit-content;max-width:100%;gap:3px;padding:5px;border:1px solid rgba(255,255,255,.07);border-radius:28px;background:rgba(0,0,0,.26)}
#rankModal .rk-sources button{font-size:12px;padding:9px 16px;white-space:nowrap;min-height:40px}
#rankModal .rk-sources button.is-active{background:var(--rk-selected);color:var(--rk-selected-text);box-shadow:0 2px 7px #0002}
#rankModal .rk-filters{display:flex;align-items:center;gap:13px;flex-wrap:wrap;justify-content:flex-start;padding:19px 0 18px}
#rankModal .rk-filter{display:flex;align-items:center;gap:9px;color:var(--rk-muted);font-size:12px;margin:0}
#rankModal .rk-filter select{max-width:200px;background:var(--rk-panel);color:var(--rk-text);border:1px solid var(--rk-border);border-radius:22px;padding:9px 12px;min-height:42px;outline-offset:3px;font-size:12px}
#rankModal .rk-filter option{background:var(--rk-bg);color:var(--rk-text)}
#rankModal .rk-basis{font-size:11px;color:var(--rk-muted);margin-left:auto}
#rankModal .rk-periods{display:flex;flex-wrap:wrap;gap:2px}
#rankModal .rk-periods button{font-size:12px;padding:8px 13px;min-height:40px}
#rankModal .rk-periods button.is-active{background:rgba(255,255,255,.1);color:var(--rk-text)}
#rankModal .rk-results{padding:0 30px 18px}
#rankModal .rk-champions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding-bottom:24px}
#rankModal .rk-champion{display:block;min-width:0;border:1px solid var(--rk-border);border-radius:20px;background:var(--rk-panel);overflow:hidden;text-decoration:none;color:var(--rk-text);transition:border-color .15s,background .15s}
#rankModal a.rk-champion:hover{border-color:rgba(255,255,255,.33)}
#rankModal .rk-scene{position:relative;height:178px;display:flex;align-items:center;justify-content:center;isolation:isolate;background:var(--rk-panel);overflow:hidden}
#rankModal .rk-scene:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,var(--rk-panel),transparent 90%);z-index:0}
#rankModal .rk-art-backdrop{position:absolute;width:100%;height:100%;object-fit:cover;filter:blur(17px) saturate(.55);opacity:.4;transform:scale(1.2);z-index:-1}
#rankModal .rk-large-rank{position:absolute;left:8px;bottom:0;font-size:100px;line-height:1;letter-spacing:-6px;font-weight:650;opacity:.18;z-index:1;color:var(--rk-text)}
#rankModal .rk-rank-tag{position:absolute;left:12px;top:12px;font-size:10px;letter-spacing:1px;padding:4px 9px;border-radius:20px;background:rgba(15,19,22,.74);color:#f1f2ef;border:1px solid rgba(255,255,255,.23);z-index:3}
#rankModal .rk-poster{display:block;position:relative;flex:none;width:84px;height:124px;border-radius:9px;background:rgba(255,255,255,.05);overflow:hidden;z-index:2;box-shadow:0 9px 20px #0004}
#rankModal .rk-cover{display:block!important;position:relative!important;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover!important;margin:0!important;border-radius:inherit!important;opacity:1!important;filter:none!important;transform:none!important;visibility:visible!important}
#rankModal .rk-cover[hidden]{display:none!important}
#rankModal .rk-champion-copy{display:block;padding:0 15px 16px;position:relative;z-index:2}
#rankModal .rk-title{display:block;color:var(--rk-text);font-weight:550;font-size:14px;overflow-wrap:anywhere;line-height:1.5}
#rankModal .rk-champion .rk-title{min-height:42px}
#rankModal .rk-meta{display:block;color:var(--rk-muted);font-size:11px;margin-top:4px;overflow-wrap:anywhere}
#rankModal .rk-card-bottom{display:flex;gap:8px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:14px}
#rankModal .rk-rating{font-size:21px;line-height:1.2;color:var(--rk-gold);font-weight:550;font-variant-numeric:tabular-nums;white-space:nowrap}
#rankModal .rk-pill{font-size:10px;border-radius:18px;padding:4px 8px;background:rgba(255,255,255,.045);color:var(--rk-muted);white-space:nowrap}
#rankModal .rk-hot-label{font-size:13px;font-weight:500;color:var(--rk-muted)}
#rankModal .rk-update-label{font-size:12px;color:var(--rk-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
#rankModal .rk-no-rating{font-size:12px;color:var(--rk-muted)}
#rankModal .rk-list-head{display:flex;gap:12px;justify-content:space-between;align-items:center;border-bottom:1px solid var(--rk-border);padding-bottom:12px;font-size:11px;color:var(--rk-muted)}
#rankModal .rk-list-head strong{font-size:12px;font-weight:500;color:var(--rk-text)}
#rankModal .rk-row{display:grid;grid-template-columns:32px 43px minmax(0,1fr) 120px;gap:15px;align-items:center;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.06);text-decoration:none;color:var(--rk-text)}
#rankModal .rk-row:last-child{border:0}
#rankModal a.rk-row:hover .rk-title{color:var(--rk-gold)}
#rankModal .rk-row-rank{font-size:20px;font-variant-numeric:tabular-nums;font-weight:500;color:var(--rk-muted);opacity:.8}
#rankModal .rk-row .rk-poster{width:43px;height:61px;border-radius:6px;box-shadow:none}
#rankModal .rk-copy{min-width:0}
#rankModal .rk-row-metric{text-align:right;font-size:12px;min-width:0}
#rankModal .rk-row-metric small{display:block;font-size:10px;color:var(--rk-muted);margin-top:3px;overflow-wrap:anywhere;white-space:normal}
#rankModal .rk-row .rk-title{font-size:13px}
#rankModal .rk-row .rk-rating{font-size:19px}
#rankModal .rk-status{font-size:12px;color:var(--rk-muted);padding:0 30px 15px}
#rankModal .rk-status.is-error{color:var(--rk-gold)}
#rankModal .rk-empty{padding:54px 16px;text-align:center;color:var(--rk-muted);font-size:14px}
#rankModal .rk-empty strong{color:var(--rk-text);font-weight:500}
#rankModal .rk-empty p{font-size:12px;margin:9px 0 15px}
#rankModal .rk-empty button{margin-top:14px;background:var(--rk-panel);border:1px solid var(--rk-border)}
#rankModal .rk-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;padding:15px 30px;border-top:1px solid var(--rk-border);background:rgba(255,255,255,.025);font-size:11px;color:var(--rk-muted)}
html[data-theme="light"] #rankModal .ranking-v4{--rk-bg:#f5f5f2;--rk-panel:#e8ebe8;--rk-text:#252a2d;--rk-muted:#687177;--rk-border:rgba(25,35,40,.13);--rk-gold:#8d691a;--rk-selected:#343b3e;--rk-selected-text:#f6f7f4;box-shadow:0 25px 90px #26303825}
html[data-theme="light"] #rankModal .rk-sources{background:rgba(35,45,50,.06)}
html[data-theme="light"] #rankModal .rk-media button.is-active,html[data-theme="light"] #rankModal .rk-periods button.is-active{background:rgba(35,45,50,.1)}
html[data-theme="light"] #rankModal .rk-pill{background:rgba(35,45,50,.06)}
html[data-theme="light"] #rankModal .rk-row{border-bottom-color:rgba(25,35,40,.08)}
@container(max-width:650px){#rankModal .rk-header{padding:24px 74px 20px 22px}#rankModal .rk-controls{padding:16px 22px 0}#rankModal .rk-results{padding:0 22px 15px}#rankModal .rk-champions{gap:10px}#rankModal .rk-scene{height:160px}#rankModal .rk-champion-copy{padding:0 12px 14px}#rankModal .rk-poster{width:76px;height:113px}#rankModal .rk-row{gap:12px;grid-template-columns:28px 40px minmax(0,1fr) 98px}#rankModal .rk-row .rk-poster{width:40px;height:57px}#rankModal .rk-footer{padding:14px 22px}#rankModal .rk-basis{width:100%;margin-left:0}}
@container(max-width:460px){#rankModal .rk-header{padding:22px 64px 19px 18px}#rankModal .rk-header h2{font-size:26px}#rankModal .rk-header p{font-size:11px}#rankModal .rk-controls{padding:14px 15px 0}#rankModal .rk-media{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;margin-bottom:14px}#rankModal .rk-media button{min-width:0;font-size:12px;padding:9px 4px}#rankModal .rk-sources{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;border-radius:22px}#rankModal .rk-sources button{min-height:44px;padding:9px 4px;font-size:12px;white-space:normal}#rankModal .rk-filters{padding:15px 3px;gap:10px}#rankModal .rk-filter select{font-size:16px;min-height:44px;max-width:180px}#rankModal .rk-results{padding:0 18px 14px}#rankModal .rk-champions{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding-bottom:20px}#rankModal .rk-champion:first-child{grid-column:1/-1;display:grid;grid-template-columns:112px minmax(0,1fr)}#rankModal .rk-champion:first-child .rk-scene{height:182px}#rankModal .rk-champion:first-child .rk-champion-copy{display:flex;flex-direction:column;justify-content:center;padding:23px 13px 18px}#rankModal .rk-champion:first-child .rk-title{font-size:17px;min-height:0}#rankModal .rk-scene{height:138px}#rankModal .rk-poster{width:70px;height:103px}#rankModal .rk-large-rank{font-size:82px;left:3px;letter-spacing:-5px}#rankModal .rk-rank-tag{top:9px;left:9px;padding:3px 7px;font-size:9px}#rankModal .rk-champion-copy{padding:0 11px 13px}#rankModal .rk-champion .rk-title{font-size:12px;min-height:36px}#rankModal .rk-card-bottom{margin-top:10px;gap:5px}#rankModal .rk-rating{font-size:18px}#rankModal .rk-pill{font-size:9px;padding:3px 6px;white-space:normal}#rankModal .rk-row{grid-template-columns:23px 36px minmax(0,1fr) 73px;gap:9px;padding:12px 0}#rankModal .rk-row .rk-poster{width:36px;height:52px}#rankModal .rk-row .rk-title{font-size:12px}#rankModal .rk-row .rk-meta{font-size:10px}#rankModal .rk-row .rk-rating{font-size:17px}#rankModal .rk-row-metric .rk-update-label{font-size:10px;white-space:normal}#rankModal .rk-footer{padding:14px 18px}#rankModal .rk-status{padding:0 18px 13px}#rankModal .ranking-v4 .rk-close{top:20px!important;right:16px!important}}
@media(max-width:600px){#rankModal{padding:0!important}#rankModal .ranking-v4{width:100%!important;max-width:none!important;max-height:100dvh!important;border-radius:0!important;margin:0!important;border:0!important;padding-top:env(safe-area-inset-top,0px)!important;padding-bottom:env(safe-area-inset-bottom,0px)!important}}
@media(prefers-reduced-motion:reduce){#rankModal .ranking-v4 *{transition:none!important}}

/* Stable loading geometry and restrained card skeleton. */
#rankModal .ranking-v4{height:min(880px,calc(100dvh - 64px))!important;box-sizing:border-box!important;scrollbar-gutter:stable}
#rankModal .rk-loading-status{font-size:12px;color:var(--rk-muted);padding:0 0 12px}
#rankModal .rk-skeleton{display:block;position:relative;overflow:hidden;background:rgba(150,160,165,.12);border-radius:7px}
#rankModal .rk-skeleton:after{content:'';position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(205,214,219,.1),transparent);animation:rk-skeleton-shimmer 1.6s ease-in-out infinite}
#rankModal .rk-skeleton-poster{width:84px;height:124px;z-index:2}
#rankModal .rk-skeleton-title{width:78%;height:17px;margin:6px 0 13px}
#rankModal .rk-skeleton-meta{width:53%;height:11px;margin-top:6px}
#rankModal .rk-skeleton-score{width:49px;height:20px;justify-self:end}
#rankModal .rk-skeleton-number{width:21px;height:19px}
#rankModal .rk-skeleton-thumb{width:43px;height:61px}
#rankModal .rk-skeleton-card .rk-champion-copy{padding-bottom:18px}
#rankModal .rk-skeleton-card .rk-card-bottom{margin-top:21px}
@keyframes rk-skeleton-shimmer{to{transform:translateX(100%)}}
@container(max-width:460px){#rankModal .rk-skeleton-poster{width:70px;height:103px}#rankModal .rk-skeleton-thumb{width:36px;height:52px}}
@media(max-width:600px){#rankModal .ranking-v4{height:100dvh!important}}
@media(prefers-reduced-motion:reduce){#rankModal .rk-skeleton:after{animation:none;display:none}}
