:root { --ranking-gold:#d99d1d; --ranking-blue:#1e9bd0; --ranking-panel:#061526; --ranking-line:rgba(217,157,29,.32); }
* { box-sizing:border-box; }
body.ranking-page { background:radial-gradient(circle at 50% -10%,#123653 0,#061523 34%,#020914 72%); color:#eef3ff; margin:0; min-height:100vh; font-family:Arial,Helvetica,sans-serif; }
.ranking-header { align-items:center; border-bottom:1px solid var(--ranking-line); display:grid; grid-template-columns:1fr auto 1fr; min-height:112px; padding:18px clamp(18px,4vw,64px); text-align:center; }
.ranking-header__logo { justify-self:start; }
.ranking-header__logo img { display:block; height:auto; width:clamp(150px,17vw,230px); }
.ranking-header p { color:#94adbf; font-size:.72rem; letter-spacing:.2em; margin:0 0 3px; text-transform:uppercase; }
.ranking-header h1 { color:var(--ranking-gold); font-family:"Coolvetica","Arial Narrow",sans-serif; font-size:clamp(2rem,4vw,3.4rem); letter-spacing:.08em; margin:0; }
.ranking-header__back { color:#e7edf7; justify-self:end; min-height:44px; padding:12px; text-decoration-color:var(--ranking-gold); text-underline-offset:5px; }
.ranking-main { margin:0 auto; max-width:1840px; padding:24px clamp(12px,2.4vw,44px) 48px; }
.ranking-difficulty { display:flex; justify-content:center; margin-bottom:18px; }
.ranking-difficulty button { background:#071a2b; border:1px solid #34526b; color:#b9c9d8; cursor:pointer; font-weight:800; min-height:42px; padding:8px 24px; text-transform:uppercase; }
.ranking-difficulty button:first-child { border-radius:5px 0 0 5px; }
.ranking-difficulty button:last-child { border-radius:0 5px 5px 0; }
.ranking-difficulty button[aria-pressed="true"] { background:linear-gradient(#efbd4f,#ad7413); border-color:#f0c764; color:#120c02; }
.ranking-status { color:#adc0d1; margin:0 0 14px; min-height:1.2em; text-align:center; }
.ranking-status--error { color:#ff8d8d; }
.ranking-columns { display:grid; gap:clamp(12px,1.5vw,24px); grid-template-columns:repeat(2,minmax(0,1fr)); }
.ranking-category { background:linear-gradient(160deg,rgba(9,34,55,.97),rgba(3,14,25,.97)); border:1px solid var(--ranking-line); border-radius:7px; box-shadow:0 18px 45px rgba(0,0,0,.28); min-width:0; overflow:visible; padding:16px 12px 18px; }
.ranking-category h2 { border-bottom:1px solid var(--ranking-line); color:var(--ranking-gold); font-family:"Coolvetica","Arial Narrow",sans-serif; font-size:clamp(1rem,1.5vw,1.45rem); letter-spacing:.08em; margin:0 0 10px; padding:0 5px 12px; text-align:center; }
.ranking-list { display:grid; gap:7px; }
.ranking-empty { color:#91a6b8; padding:30px 12px; text-align:center; }
.ranking-separator { border-top:1px dashed rgba(217,157,29,.5); height:8px; margin:7px 5px 0; }
.ranking-column-header,.ranking-row { align-items:center; display:grid; gap:8px; grid-template-columns:38px minmax(70px,1.35fr) minmax(48px,.72fr) minmax(50px,.78fr) minmax(60px,1fr) 36px; }
.ranking-column-header { color:#7892a7; font-size:.61rem; font-weight:800; letter-spacing:.04em; padding:2px 8px 4px; text-align:center; text-transform:uppercase; }
.ranking-column-header span:nth-child(2) { text-align:left; }
.ranking-row { background:rgba(7,26,43,.85); border:1px solid rgba(115,151,179,.22); border-radius:5px; min-height:58px; padding:7px 8px; position:relative; }
.ranking-row--current { border-color:var(--ranking-gold); box-shadow:0 0 16px rgba(217,157,29,.2); }
.ranking-row__position { color:var(--ranking-gold); font-size:1.05rem; font-weight:900; text-align:center; }
.ranking-row__team,.ranking-row__person { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ranking-row__team { font-size:.88rem; font-weight:800; }
.ranking-row__metric { color:#fff; font-size:.9rem; font-weight:800; text-align:center; }
.ranking-row__phase,.ranking-row__person { color:#aebdca; font-size:.8rem; text-align:center; }
.ranking-eye { align-items:center; background:#0b263c; border:1px solid #45677f; border-radius:4px; color:#e9f5ff; cursor:pointer; display:flex; font-size:1rem; height:34px; justify-content:center; width:34px; }
.ranking-eye svg { display:block; flex:0 0 auto; height:22px; overflow:visible; width:22px; }
.ranking-eye .ranking-eye__outline { fill:none!important; stroke:currentColor!important; stroke-linecap:round; stroke-linejoin:round; stroke-width:2!important; }
.ranking-eye .ranking-eye__pupil { fill:currentColor!important; stroke:none!important; }
.ranking-eye:hover,.ranking-eye:focus-visible,.ranking-eye[aria-expanded="true"] { border-color:var(--ranking-gold); color:var(--ranking-gold); }
.ranking-roster-popover { background:#03101d; border:1px solid var(--ranking-gold); border-radius:7px; box-shadow:0 18px 55px rgba(0,0,0,.72); display:none; left:50%; padding:14px; position:fixed; top:50%; transform:translate(-50%,-50%); width:min(960px,calc(100vw - 28px)); z-index:30; }
.ranking-eye:hover + .ranking-roster-popover,.ranking-eye:focus + .ranking-roster-popover,.ranking-roster-popover:hover,.ranking-roster-popover[data-open="true"] { display:block; }
.ranking-roster-summary { color:#d9e4ee; display:flex; font-size:.82rem; justify-content:space-between; margin-bottom:10px; }
.ranking-roster-formation.area-confronto--partida { min-height:558px; position:relative; }
.ranking-roster-lines.links-sinergia { height:100%; inset:0; pointer-events:none; position:absolute; width:100%; z-index:0; }
.ranking-roster-cards.formacao-time { align-items:start!important; display:grid!important; gap:18px 0!important; grid-template-columns:repeat(6,118px)!important; grid-template-rows:repeat(2,270px)!important; justify-content:center!important; justify-items:center!important; margin:0 auto!important; min-height:558px!important; overflow:visible!important; padding:0!important; position:relative; width:100%!important; z-index:1; }
.ranking-roster-cards .ranking-player-card { align-self:start!important; grid-column:span 2; height:auto!important; justify-self:center!important; max-width:180px!important; min-width:180px!important; transform:none!important; width:180px!important; }
.ranking-roster-cards .ranking-player-card[data-route="jungle"] { grid-column:2 / span 2!important; grid-row:1!important; }
.ranking-roster-cards .ranking-player-card[data-route="support"] { grid-column:5 / span 2!important; grid-row:1!important; }
.ranking-roster-cards .ranking-player-card[data-route="top"] { grid-column:1 / span 2!important; grid-row:2!important; }
.ranking-roster-cards .ranking-player-card[data-route="mid"] { grid-column:3 / span 2!important; grid-row:2!important; }
.ranking-roster-cards .ranking-player-card[data-route="adc"] { grid-column:5 / span 2!important; grid-row:2!important; }
.ranking-roster-cards .ranking-player-card .draft-card__bandeira { background:transparent!important; border:0!important; box-shadow:none!important; }
.ranking-roster-cards .ranking-player-card .draft-card__foto { object-fit:var(--card-photo-fit,cover)!important; object-position:var(--card-photo-object-position,center center)!important; transform:translateX(var(--card-photo-shift-x,0%)) translateY(var(--card-photo-shift-y,0%)) scale(var(--card-photo-scale-ranking,var(--card-photo-scale-result,1)))!important; transform-origin:var(--card-photo-transform-origin,center bottom); }
.ranking-roster-cards .ranking-player-card .draft-card__ger { box-sizing:border-box; overflow:visible!important; }
.ranking-roster-cards .ranking-player-card .draft-card__ger strong { font-size:.94rem!important; line-height:.95!important; transform:translateY(-.06rem)!important; }
.ranking-roster-cards .ranking-player-card .draft-card__time { bottom:5.1%!important; height:4.8%!important; line-height:1.1!important; overflow:visible!important; padding-bottom:.05rem!important; }
@media (max-width:820px) { .ranking-columns { grid-template-columns:1fr; } .ranking-category { margin:0 auto; max-width:780px; width:100%; } }
@media (max-width:640px) { .ranking-header { grid-template-columns:1fr auto; min-height:88px; } .ranking-header>div { grid-column:1/-1; grid-row:2; } .ranking-header__logo img { width:125px; } .ranking-column-header,.ranking-row { grid-template-columns:34px minmax(72px,1.2fr) minmax(56px,.8fr) minmax(58px,.7fr) 36px; } .ranking-column-header span:nth-child(5),.ranking-row__person { display:none; } .ranking-roster-popover { padding:10px; position:fixed; inset:50% auto auto 50%; transform:translate(-50%,-50%); } .ranking-roster-formation.area-confronto--partida { min-height:316px; } .ranking-roster-cards.formacao-time { gap:10px 0!important; grid-template-columns:repeat(6,55px)!important; grid-template-rows:repeat(2,150px)!important; min-height:310px!important; } .ranking-roster-cards .ranking-player-card { max-width:100px!important; min-width:100px!important; width:100px!important; } .ranking-roster-cards .ranking-player-card .draft-card__time { bottom:4.9%!important; height:5.2%!important; } }