/* Ranked ladder (assets/ranked.js, /ranked, profile, online strip badges, lobby room choice, end screen). Oct 2026. */
.rkb{display:inline-flex;width:1.3em;height:1.3em;flex:none;vertical-align:-.28em;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.rkb svg{width:100%;height:100%;display:block}
.rkb .o{fill:var(--rk-o)}
.rkb .i{fill:var(--rk-i)}
.rkb .g{fill:var(--rk-g)}
.rkb-bronze{--rk-o:#6E3F22;--rk-i:#C7895A;--rk-g:#F6D7B8}
.rkb-silver{--rk-o:#5D6676;--rk-i:#C8D0DB;--rk-g:#FFFFFF}
.rkb-gold{--rk-o:#93640F;--rk-i:#EDB956;--rk-g:#FFF4D8}
.rkb-platinum{--rk-o:#17706F;--rk-i:#69D3CB;--rk-g:#EFFFFD}
.rkb-diamond{--rk-o:#2747AE;--rk-i:#80B4FF;--rk-g:#EEF5FF}
.rkb-champion{--rk-o:#5E218C;--rk-i:#B57CF5;--rk-g:#F6C964}
.rkchip{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.rkchip b{font:600 .86rem/1 var(--font)}
.rkchip small{font:600 .74rem/1 var(--mono,ui-monospace,monospace);color:var(--muted)}
.rkc-champion b{color:#C99BFF}
.rkc-diamond b{color:#8DBBFF}
.rkc-platinum b{color:#72D6CE}
.rkc-gold b{color:#E9B45A}

/* online strip: a small badge after the name */
.rail-rk{display:inline-flex;align-items:center;flex:none;font-size:.9rem}
.rail-ask small .rk-tag,.rk-tag{display:inline-block;font:700 .58rem/1 var(--font);letter-spacing:.08em;text-transform:uppercase;color:#18130A;background:linear-gradient(135deg,#F2C462,#D4962A);padding:3px 6px;border-radius:999px;vertical-align:1px;margin-left:4px}

/* play lobby room: Casual / Ranked */
#rankedOnlineRow .seg button[data-v="1"][aria-pressed="true"]{background:linear-gradient(135deg,#F2C462,#D4962A);color:#18130A}
#rankedOnlineNote.agree{color:var(--gold)}
.rl-p .rkb{font-size:.95rem;margin-left:4px}

/* end screen after a ranked duel */
.rankednote{min-height:1.4em;margin:8px 0 0}
.rk-end{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;font-size:.92rem;color:var(--muted)}
.rk-end .rkb{font-size:1.4rem}
.rk-end b{font:600 1.3rem/1 var(--serif);color:var(--ink)}
.rk-end em{font:700 .9rem/1 var(--mono,ui-monospace,monospace);font-style:normal}
.rk-end em.up{color:#4CCA8A}
.rk-end em.down{color:#F07A6A}
.duel-ranked-pill{display:inline-flex;align-items:center;gap:6px}

/* profile (/friends#profile) */
.fprofile.rk-profile{display:block}
.fprofile.rk-profile[hidden]{display:none} /* signed out or ranked not open yet: no empty box on /friends */
.rk-profile h2{margin:0 0 4px}
.rk-profile h3{margin:16px 0 8px;font-size:1rem}
.rk-profile > p{margin:6px 0}
.rk-mine li b{font-size:.95rem}
.rk-mine{list-style:none;margin:12px 0;padding:0;display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.rk-mine li{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.rk-mine li .rkb{font-size:1.8rem}
.rk-mine li span{display:flex;flex-direction:column;min-width:0;flex:1}
.rk-mine li small{color:var(--muted);font-size:.8rem}
.rk-mine li em{font:600 .82rem/1 var(--mono,ui-monospace,monospace);font-style:normal;color:var(--muted)}
.rk-past{display:flex;flex-wrap:wrap;gap:8px}
.rk-pb{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--line);border-radius:999px;background:var(--surface)}
.rk-pb small{font-size:.76rem;color:var(--muted)}

/* /ranked: the leaderboard */
body.rankedpage{background:radial-gradient(1100px 460px at 85% -8%,rgba(181,124,245,.10),transparent 70%),radial-gradient(900px 420px at 0% 0%,rgba(233,180,76,.08),transparent 70%),linear-gradient(180deg,#0D1322 0,var(--bg) 640px) no-repeat,var(--bg)}
.rk-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:34px}
.rk-head h1{font-size:clamp(2.6rem,6vw,4rem)}
.rk-head h1 em{color:#E9B44C}
.rk-season{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rk-season[hidden]{display:none} /* ladder not open yet or failed to load: no empty season picker */
.rk-season label{display:inline-flex;align-items:center;gap:8px;font-size:.86rem;color:var(--muted)}
.rk-season select{font:600 .9rem/1 var(--font);padding:10px 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.rk-left{font-size:.86rem;color:var(--muted)}
.rk-tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;max-width:100%;padding:2px;margin:22px 0 14px}
.rk-tabs::-webkit-scrollbar{display:none}
.rk-tabs button{flex:none;min-height:38px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--muted);font:600 .86rem/1 var(--font);cursor:pointer;white-space:nowrap}
.rk-tabs button:hover{color:var(--ink)}
.rk-tabs button[aria-selected="true"]{background:#E9B44C;border-color:#E9B44C;color:#18130A}
.rk-bands{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin:0 0 18px}
.rk-band{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.rk-band .rkb{font-size:1.6rem}
.rk-band span{display:flex;flex-direction:column;min-width:0}
.rk-band b{font-size:.88rem}
.rk-band small{font-size:.74rem;color:var(--muted);white-space:nowrap}
.rk-table{border:1px solid var(--line);border-radius:18px;background:var(--surface);overflow:hidden}
.rk-row{display:grid;grid-template-columns:52px minmax(0,1fr) 150px 80px 90px;align-items:center;gap:12px;padding:10px 16px;border-top:1px solid var(--line)}
.rk-row:first-child{border-top:0}
.rk-row.hd{font:700 .62rem/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);padding-top:14px;padding-bottom:12px}
.rk-row.hd span{font:inherit;color:inherit}
.rk-row .pos{font:600 1.15rem/1 var(--serif);color:var(--muted);text-align:center}
.rk-row.top3 .pos{color:#E9B44C;font-size:1.35rem}
.rk-row .who{display:flex;align-items:center;gap:10px;min-width:0}
.rk-row .who img,.rk-row .who .rail-av{width:34px;height:34px;border-radius:50%;flex:none;object-fit:cover}
.rk-row .who .rail-av{display:grid;place-items:center;font:700 .9rem/1 var(--font);color:#fff;background:hsl(var(--h,200) 45% 42%)}
.rk-row .who span{display:flex;flex-direction:column;min-width:0}
.rk-row .who b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rk-row .who small{font-size:.76rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rk-row .num{font:600 .95rem/1 var(--mono,ui-monospace,monospace);text-align:right}
.rk-row .wl{font:500 .86rem/1 var(--mono,ui-monospace,monospace);color:var(--muted);text-align:right}
.rk-row.me{background:color-mix(in srgb,#E9B44C 10%,var(--surface))}
.rk-pin{position:sticky;bottom:12px;z-index:5;margin-top:12px;border:1px solid color-mix(in srgb,#E9B44C 55%,var(--line));border-radius:16px;background:color-mix(in srgb,#E9B44C 12%,var(--surface));box-shadow:0 14px 30px -18px rgba(0,0,0,.7)}
.rk-pin .rk-row{border-top:0}
.rk-empty{padding:34px 16px;text-align:center;color:var(--muted)}
.rk-how{margin-top:30px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.rk-how div{padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.rk-how b{display:block;font:700 .68rem/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin-bottom:8px}
.rk-how p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.5}
.rk-signin{padding:30px 16px;text-align:center}
@media (max-width:900px){.rk-bands{grid-template-columns:repeat(3,minmax(0,1fr))}.rk-how{grid-template-columns:minmax(0,1fr)}}
@media (max-width:600px){
  .rk-row{grid-template-columns:34px minmax(0,1fr) 30px 52px 64px;gap:8px;padding:9px 10px}
  .rk-row .tier .rkchip b{display:none}
  .rk-row .who img,.rk-row .who .rail-av{width:28px;height:28px}
  .rk-row .pos{font-size:1rem}
  .rk-bands{display:flex;overflow-x:auto;scrollbar-width:none;gap:6px;margin:0 -16px 14px;padding:0 16px}
  .rk-bands::-webkit-scrollbar{display:none}
  .rk-band{flex:none;padding:7px 11px;gap:7px;border-radius:999px}
  .rk-band .rkb{font-size:1.15rem}
  .rk-band b{font-size:.8rem}
  .rk-band small{font-size:.68rem}
  .rk-head{padding-top:20px}
}