main{max-width:1540px}
.play-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:34px;align-items:start}
.play-layout .view{min-width:0}
.ranking-panel{position:sticky;top:24px;background:#1d1b22;border:1px solid var(--line);border-radius:6px;overflow:hidden;align-self:start}
.ranking-panel-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:22px 18px 8px}
.ranking-panel-heading .eyebrow{font-size:7px;letter-spacing:1.3px;gap:7px}
.ranking-panel-heading .eyebrow:before{width:12px}
.ranking-panel h2{font:600 31px/1.1 var(--display);text-transform:uppercase;margin:8px 0 0;display:flex;align-items:center;gap:9px}
.live-dot{width:6px;height:6px;border-radius:50%;background:#b4c29b;box-shadow:0 0 0 4px #b4c29b0a}
.ranking-counter{color:var(--coral);font:500 28px/1 var(--display);text-align:right}
.ranking-counter small{display:block;margin-top:5px;font:9px/1.4 var(--sans);color:var(--muted)}
.ranking-explainer{font-size:10px;line-height:1.7;color:var(--muted);margin:6px 18px 18px;min-height:34px}
.ranking-list{padding:0 10px 10px;margin:0;list-style:none;max-height:min(610px,calc(100vh - 240px));min-height:270px;overflow-y:auto;scrollbar-color:#514452 #1d1b22;scrollbar-width:thin}
.ranking-row{width:100%;background:transparent;display:grid;grid-template-columns:50px 37px minmax(0,1fr);align-items:center;text-align:left;gap:8px;padding:7px 6px;border:1px solid transparent;border-bottom-color:#322c37;min-height:61px;border-radius:3px}
.ranking-row:hover{background:#302733;border-color:#6f596f}
.ranking-row.is-comparing{background:#30262e;border-color:#62454d;margin-bottom:3px}
.ranking-row.is-confirmed{background:#39302d;border-color:#80644160;margin-bottom:5px}
.ranking-row.just-picked{animation:rank-pop .9s ease-out}
@keyframes rank-pop{from{background:#79534599}to{}}
.rank-number{font:500 20px/1 var(--display);color:#aca0b0;white-space:nowrap;letter-spacing:-.2px}
.rank-number small{font:400 11px/1 var(--sans);opacity:.7;margin:0 1px}
.rank-number.long-rank{font-size:18px}
.is-confirmed .rank-number{font-size:27px;color:var(--gold)}
.rank-thumb{width:37px;height:43px;overflow:hidden;border-radius:3px;background:#c3b8bc}
.rank-thumb img{width:100%;height:100%;object-fit:cover}
.rank-thumb img[data-wide]{object-fit:cover;transform:scale(1.6)}
.rank-row-text{display:block;min-width:0}
.rank-row-text strong{font-size:11px;font-weight:500;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#ebe1ed}
.rank-row-text small{font-size:8px;margin-top:5px;color:#a291ab;display:block}
.is-confirmed .rank-row-text small{color:#cfb18a}
.ranking-panel-footer{border-top:1px solid var(--line);padding:13px 18px;display:flex;flex-direction:column;gap:9px;font-size:9px;color:#8f8298}
.ranking-panel-footer button,.placement-note button,.text-button{background:transparent;color:var(--coral);font-size:10px;text-align:left;padding:0;line-height:1.8;align-self:flex-start}
.ranking-panel-footer button:hover,.placement-note button:hover,.text-button:hover{text-decoration:underline}
.placement-note{font-size:10px;line-height:1.7;color:var(--muted);margin:19px 0 0}
.placement-note button{font-size:10px;margin-left:4px}
.ranking-result{padding:10px 0 22px;text-align:left}
.ranking-result .eyebrow{justify-content:flex-start}
.ranking-result h1{font-size:clamp(48px,4.2vw,70px);margin-top:14px}
.result-intro{color:var(--muted);line-height:1.8;font-size:12px;margin-bottom:28px}
.podium{display:grid;grid-template-columns:1.12fr 1fr 1fr;gap:16px;align-items:stretch}
.podium-card{position:relative;display:block;background:#25212a;padding:0;overflow:hidden;border:1px solid #514652;border-radius:6px;text-align:left;transition:transform .15s,border-color .15s}
.podium-card:hover{transform:translateY(-3px);border-color:var(--coral)}
.podium-card.place-1{border-color:#d5ad6a;box-shadow:0 0 28px #d5ad6a0d}
.podium-place{padding:13px 15px;display:flex;align-items:center;justify-content:space-between;color:#a89ba9;font-size:8px;letter-spacing:1.8px}
.podium-place strong{font:500 29px/1 var(--display);color:#d4c4d6;letter-spacing:0}
.place-1 .podium-place,.place-1 .podium-place strong{color:var(--gold)}
.place-3 .podium-place,.place-3 .podium-place strong{color:#c69885}
.podium-image{height:250px;display:block;background:radial-gradient(ellipse at center,#e2d4ce,#bfb0bd);overflow:hidden}
.podium-image img{width:100%;height:100%;object-fit:contain}
.podium-image img[data-wide]{object-fit:cover;transform:scale(1.22)}
.podium-info{display:block;padding:15px 14px 18px;background:#f3eee7;color:#252029}
.podium-info .skin-name{font-size:26px;min-height:58px;margin:0 0 9px;overflow-wrap:anywhere}
.ranking-result .champion-actions{justify-content:flex-start;margin:24px 0 16px}
.ranking-result>.source-note{font-size:10px;line-height:1.9;margin-top:24px}
.placed-list{list-style:none;padding:0;margin:22px 0;border:1px solid var(--line);border-radius:5px;overflow:hidden}
.placed-list li{display:flex;gap:15px;align-items:center;padding:12px 15px;border-bottom:1px solid var(--line)}
.placed-list li:last-child{border:0}
.placed-list li>span{font:500 23px/1 var(--display);color:var(--gold);min-width:26px}
.placed-list button{font-size:12px;background:transparent;color:var(--ink);padding:0;text-align:left}
.placed-list small{font-size:9px;color:var(--muted);margin-left:auto}
.dialog-copy ol{padding-left:19px}
@media(max-width:1250px){.play-layout{grid-template-columns:minmax(0,1fr) 270px;gap:24px}.intro h1{font-size:51px}.intro-stat{min-width:100px;padding-left:18px}.intro-stat strong{font-size:35px}.intro p{font-size:11px}.skin-stage{height:350px}.ranking-panel-heading{padding-left:14px;padding-right:14px}.ranking-panel h2{font-size:28px}.ranking-explainer{margin-left:14px;margin-right:14px}.ranking-row{grid-template-columns:48px 32px minmax(0,1fr);gap:6px;padding-left:3px;padding-right:3px}.rank-thumb{width:32px;height:40px}.rank-row-text strong{font-size:10px}.podium{gap:10px}.podium-image{height:210px}.podium-info{padding:12px 10px 15px}.podium-info .skin-name{font-size:22px;min-height:50px}.podium-info .rarity{font-size:7px;letter-spacing:1px}.podium-place{padding:12px 10px}}
@media(max-width:950px){.play-layout{grid-template-columns:1fr}.ranking-panel{position:static}.ranking-list{max-height:480px;min-height:0}.ranking-panel-heading{padding:20px 18px 8px}.ranking-explainer{margin-left:18px;margin-right:18px;min-height:0}.ranking-row{grid-template-columns:60px 40px minmax(0,1fr);gap:14px;padding:8px 10px}.rank-thumb{width:40px;height:44px}.rank-row-text strong{font-size:12px}.rank-row-text small{font-size:9px}.ranking-list{padding:0 12px 12px}.ranking-panel-footer{flex-direction:row;justify-content:space-between}.skin-stage{height:380px}.intro h1{font-size:58px}.podium-image{height:260px}.podium-info .skin-name{font-size:27px}.intro p{font-size:13px}}
@media(max-width:700px){.play-layout{gap:28px}.intro h1{font-size:39px}.intro p{font-size:10px;max-width:235px}.intro-stat{padding-left:12px;min-width:80px}.intro-stat strong{font-size:29px}.intro-stat strong span{font-size:16px}.skin-stage{height:285px}.ranking-panel h2{font-size:29px}.ranking-list{max-height:430px}.ranking-panel-footer{font-size:8px;gap:12px}.ranking-panel-footer button{font-size:9px}.placement-note{font-size:9px}.placement-note button{font-size:9px}.ranking-result{padding-top:0}.ranking-result h1{font-size:45px}.result-intro{font-size:11px}.podium{gap:8px;grid-template-columns:repeat(3,minmax(0,1fr))}.podium-place{font-size:6px;letter-spacing:1px;padding:10px 8px}.podium-place strong{font-size:24px}.podium-image{height:180px}.podium-image img{width:150%;max-width:none;margin-left:-25%;object-fit:contain}.podium-image img[data-wide]{width:100%;margin:0;object-fit:cover}.podium-info{padding:10px 8px 13px}.podium-info .skin-name{font-size:19px;min-height:63px;line-height:1.1;margin-bottom:4px}.podium-info .rarity{font-size:6px;letter-spacing:.6px;gap:4px}.podium-info .rarity:before{width:4px;height:4px}.ranking-result .champion-actions{gap:9px;margin-top:20px}.ranking-result .primary-button{font-size:10px;padding:11px 13px}.ranking-result>.source-note{font-size:9px}.placed-list li{gap:10px;padding:11px 12px}.placed-list button{font-size:11px}.placed-list small{font-size:8px}}
@media(prefers-reduced-motion:reduce){.ranking-row.just-picked{animation:none}}