/* EloShowdown — leaderboard & profile page components.
   Shared by the global rankings, community leaderboards and player profiles.
   Loads after season-theme.css. */
/* ── page: global rankings ── */
.crumb{display:flex;align-items:center;gap:.5rem;padding:.75rem var(--gut) 0;font-family:'Rajdhani',sans-serif;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.crumb .sep{opacity:.45}
.crumb .now{color:var(--gold-pale)}
.phead{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.2rem;align-items:end;padding:.8rem var(--gut) 1.1rem}
.phead h1{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:clamp(1.5rem,2.6vw,2.05rem);letter-spacing:.09em;line-height:1.1;color:var(--ink)}
.phead p{font-size:.82rem;line-height:1.6;color:var(--ink-2);max-width:60ch;margin-top:.4rem;text-wrap:pretty}
.scope{display:inline-flex;align-items:center;gap:.4rem;font-family:'Rajdhani',sans-serif;font-weight:600;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--acc-hot);border:1px solid rgba(var(--acc-rgb),.45);background:rgba(var(--acc-rgb),.12);padding:.28rem .6rem;white-space:nowrap}

.ctrl{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;padding:.75rem var(--gut);border-top:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2)}
.ctrl .fld{flex:1 1 220px;position:relative;min-width:0}
.ctrl .fld .si{position:absolute;left:.72rem;top:50%;transform:translateY(-50%);color:var(--ink-3);font-size:.8rem;pointer-events:none}
.sel{font-family:'Rajdhani',sans-serif;font-weight:600;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);background:var(--paper);border:1px solid var(--rule);padding:.5rem 1.9rem .5rem .75rem;cursor:pointer;outline:none;appearance:none;-webkit-appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23968a6a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .65rem center}
.sel:focus{border-color:rgba(var(--acc-rgb),.6)}
.howbtn{display:inline-flex;align-items:center;gap:.4rem;font-family:'Rajdhani',sans-serif;font-weight:700;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-pale);background:rgba(var(--gold-rgb),.1);border:1px solid var(--rule);padding:.5rem .8rem;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s}
.howbtn:hover{background:rgba(var(--gold-rgb),.2);border-color:var(--gold-dim)}
.howbtn svg{width:13px;height:13px}

.tbl-wrap{padding:0 var(--gut) 1.2rem}
table.lb{width:100%;border-collapse:collapse}
.lb thead th{font-family:'Rajdhani',sans-serif;font-weight:600;font-size:.62rem;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-3);text-align:left;padding:.7rem .7rem;border-bottom:1px solid var(--rule);white-space:nowrap}
.lb tbody tr{border-bottom:1px solid var(--rule-2);transition:background .13s}
.lb tbody tr:hover{background:rgba(var(--acc-rgb),.07)}
.lb tbody td{padding:.5rem .7rem;font-size:.87rem;vertical-align:middle}
.c-rank{width:56px;text-align:center}
.c-comm{width:190px}
.c-elo{width:96px;text-align:right}
.c-wld{width:112px;text-align:center}
.c-win{width:168px}
.c-mat{width:104px;text-align:center}
.rk{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:1rem;color:var(--ink-3);font-variant-numeric:tabular-nums}
.rk-1{color:#f0d98a}.rk-2{color:#cfcabd}.rk-3{color:#c58a52}
.pcell{display:flex;align-items:center;gap:.55rem;min-width:0}
.emb{width:22px;height:22px;flex-shrink:0;object-fit:contain}
.pname{font-weight:600;font-size:.9rem;color:var(--ink)}
tr:hover .pname{color:var(--gold-pale)}
.ccell{display:flex;align-items:center;gap:.45rem;min-width:0}
.ccell .fi{font-size:.9rem;flex-shrink:0}
.clink{font-size:.8rem;color:var(--acc2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.elo{display:inline-flex;align-items:center;font-family:'Rajdhani',sans-serif;font-weight:700;font-size:.85rem;font-variant-numeric:tabular-nums;padding:.1rem .45rem;border:1px solid}
.elo-hi{color:var(--acc-hot);border-color:rgba(var(--acc-rgb),.5);background:rgba(var(--acc-rgb),.12)}
.elo-mid{color:var(--acc2);border-color:rgba(var(--acc2-rgb),.45);background:rgba(var(--acc2-rgb),.1)}
.elo-lo{color:var(--ink-2);border-color:var(--rule-2)}
.wld{font-variant-numeric:tabular-nums;font-size:.82rem;white-space:nowrap}
.wld .w{color:var(--green);font-weight:600}.wld .l{color:var(--red);font-weight:600}.wld .d{color:var(--ink-3)}
.wincell{display:flex;align-items:center;gap:.55rem}
.wn{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:.84rem;min-width:44px;text-align:right;font-variant-numeric:tabular-nums}
.win-hi{color:var(--green)}.win-mid{color:var(--acc2)}.win-lo{color:var(--ink-3)}
.bar{flex:1;height:4px;background:rgba(255,255,255,.07);overflow:hidden}
.bar i{display:block;height:100%}
.bar-hi{background:var(--green)}.bar-mid{background:var(--acc2)}.bar-lo{background:var(--ink-4)}
.mat{color:var(--ink-2);font-variant-numeric:tabular-nums}
.plc{display:inline-flex;align-items:center;gap:.25rem;font-family:'Rajdhani',sans-serif;font-weight:700;font-size:.66rem;letter-spacing:.04em;padding:.14rem .42rem;border:1px solid var(--rule-2);color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.plc::before{content:'◔';opacity:.75}
.meta-m{display:none}

.pager{display:flex;gap:.7rem;justify-content:center;align-items:center;padding:0 var(--gut) 2rem}
.pg{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-pale);border:1px solid var(--rule);padding:.4rem .8rem}
.pg:hover{background:rgba(var(--gold-rgb),.14);color:var(--gold-pale)}
.pg-i{font-family:'Rajdhani',sans-serif;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}

/* how-ranks modal */
.ov{display:none;position:fixed;inset:0;background:rgba(0,0,0,.78);z-index:2000;align-items:center;justify-content:center;padding:1rem}
.ov.on{display:flex}
.modal{background:var(--plate-2);border:1px solid var(--rule);max-width:540px;width:100%;max-height:86vh;overflow-y:auto;padding:1.3rem 1.4rem;box-shadow:0 24px 70px rgba(0,0,0,.7)}
.modal h2{font-family:'Rajdhani',sans-serif;font-size:1.05rem;letter-spacing:.1em;color:var(--gold-pale);display:flex;align-items:center;gap:.5rem}
.modal h3{font-family:'Rajdhani',sans-serif;font-size:.72rem;letter-spacing:.2em;color:var(--acc-hot);margin:1.1rem 0 .5rem}
.modal p{font-size:.79rem;line-height:1.6;color:var(--ink-2);margin-bottom:.5rem}
.modal p b{color:var(--ink)}
.mhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}
.mx{background:none;border:none;color:var(--ink-3);cursor:pointer;font-size:1.1rem;padding:.2rem}
.mx:hover{color:var(--ink)}
.kgrid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin:.6rem 0}
.kbox{border:1px solid var(--rule-2);padding:.55rem;text-align:center}
.kbox .kl{font-size:.62rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3)}
.kbox .kv{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:.95rem;margin-top:.2rem}
.tier{display:flex;align-items:center;gap:.6rem;padding:.32rem 0;border-bottom:1px solid var(--rule-2)}
.tier:last-child{border-bottom:none}
.tier img{width:24px;height:24px;object-fit:contain}
.tier .tn{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;min-width:106px;color:var(--ink)}
.tier .td{font-size:.7rem;color:var(--ink-3)}
.mdone{display:block;width:100%;margin-top:1.1rem;font-family:'Rajdhani',sans-serif;font-weight:700;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--paper);background:var(--gold);border:none;padding:.55rem;cursor:pointer}

@media (max-width:900px){.c-comm,.c-mat{display:none}}
@media (max-width:720px){
    .phead{grid-template-columns:1fr;gap:.7rem;padding:.7rem var(--gut) .9rem;align-items:start}
    .phead h1{font-size:1.35rem}
    .ctrl{padding:.65rem var(--gut);gap:.45rem}
    .ctrl .fld{flex:1 1 100%}
    .sel{flex:1;min-width:0}
    .lb thead{display:none}
    .lb,.lb tbody,.lb tr,.lb td{display:block;width:100%}
    .lb tbody tr{display:grid;grid-template-columns:1.6rem 1fr auto;grid-template-areas:"rk pl elo";align-items:center;gap:.2rem .6rem;padding:.55rem .1rem}
    .lb tbody td{padding:0}
    .lb td.c-rank{grid-area:rk;width:auto;text-align:left}
    .lb td.p-col{grid-area:pl;min-width:0;width:auto}
    .lb td.c-elo{grid-area:elo;width:auto;text-align:right}
    .lb td.c-comm,.lb td.c-wld,.lb td.c-win,.lb td.c-mat{display:none}
    .meta-m{display:flex;align-items:center;gap:.4rem;margin-top:.2rem;font-size:.7rem;color:var(--ink-3);min-width:0;flex-wrap:wrap;row-gap:.15rem}
    .meta-m .fi{font-size:.75rem;flex-shrink:0}
    .meta-m .clink{font-size:.7rem;max-width:min(48%,164px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:0 1 auto}
    .meta-m .bar{max-width:54px}
    .tbl-wrap{padding:0 var(--gut) 1rem}
    .kgrid{grid-template-columns:1fr}
    .tier .tn{min-width:88px}
}