/* Rankings v2. Every rule is scoped to the rankings panel: personal/comparison
   tabs retain their existing layout and five-lane controls. */
#stats-rankings { --rank-gold:#e2c58a; --rank-muted:#92a3b4; padding:28px; min-width:0; }
#stats-page #stats-rankings { padding:24px; border:1px solid #2f404e; background:#0c1721; }
#stats-page #stats-rankings>.ranking-heading h2 { font-size:32px; }
#stats-rankings [hidden] { display:none!important; }
#stats-rankings button { cursor:pointer; }
#stats-rankings button:focus-visible, #stats-rankings select:focus-visible,
#stats-rankings input:focus-visible { outline:2px solid #f1d7a0; outline-offset:4px; }
#stats-rankings .ranking-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; margin:0 0 16px; border:0; padding:0; }
#stats-rankings .ranking-heading h2 { color:#f0dba7; font-size:32px; letter-spacing:3px; margin:0; }
#stats-rankings .ranking-event-selector { display:flex; align-items:center; gap:14px; flex:0 0 285px; padding:5px 14px; border:1px solid #857047; border-radius:7px; background:linear-gradient(110deg,#d9b86f10,#d9b86f03); }
#stats-rankings .ranking-event-selector>span { flex-shrink:0; color:#c3ad83; font-size:11px; letter-spacing:1px; }
#stats-rankings .ranking-event-selector>div { display:flex; flex:1; min-width:0; position:relative; }
#stats-rankings #ranking-event { appearance:none; background:transparent; border:0; box-shadow:none; color:#f5deb0; padding:9px 26px 7px 0; width:100%; max-width:none; height:42px; text-align:left; text-align-last:left; font-size:18px; font-weight:700; cursor:pointer; }
#stats-rankings #ranking-event option { background:#121d29; color:#e5d3ad; }
#stats-rankings .ranking-event-selector i { position:absolute; right:3px; top:7px; font-size:20px; font-style:normal; pointer-events:none; color:var(--rank-gold); }
#stats-rankings .ranking-groups { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:12px; }
#stats-rankings .ranking-groups>button { position:relative; display:flex; align-items:center; gap:13px; padding:14px 18px; min-height:64px; overflow:hidden; border:1px solid #34414d; border-radius:7px; background:#111e2a; text-align:left; color:#e0e7ed; }
#stats-rankings .ranking-groups svg { flex-shrink:0; width:30px; height:30px; stroke:#8da0b1; stroke-width:1.25; fill:none; }
#stats-rankings .ranking-groups strong { display:block; font-size:17px; letter-spacing:2px; }
#stats-rankings .ranking-groups b { position:absolute; right:8px; top:10px; font:48px Georgia,serif; color:#ffffff05; pointer-events:none; }
#stats-rankings .ranking-groups>button.active { border-color:#b9a06a; background:linear-gradient(105deg,#b8944c2b,#b8944c08); }
#stats-rankings .ranking-groups .active strong { color:#f2d9a5; }
#stats-rankings .ranking-groups .active svg { stroke:#e2c58a; }
#stats-rankings .ranking-groups .active:after { content:""; position:absolute; left:18px; bottom:0; width:40px; height:2px; background:#f2d9a5; }
#stats-rankings .ranking-groups button:hover { border-color:#b9a06a; }
#stats-rankings .board-toolbar { display:flex; justify-content:space-between; align-items:center; gap:16px; min-height:54px; margin-bottom:12px; border-bottom:1px solid #31404d; }
#stats-rankings #ranking-subtabs { display:flex; gap:24px; overflow:auto; min-width:0; scrollbar-width:thin; }
#stats-rankings .rank-subtab { flex-shrink:0; padding:16px 1px; border:0; border-bottom:2px solid transparent; background:none; border-radius:0; color:#9eafbe; font-size:13px; }
#stats-rankings .rank-subtab.active { color:#f4dca9; border-bottom-color:#d4b779; font-weight:600; }
#stats-rankings .ranking-toolbar-actions { display:flex; align-items:center; gap:12px; flex-shrink:0; }
#stats-rankings #rules-button { border:0; background:none; color:#c3b18f; white-space:nowrap; padding:8px 0; font-size:12px; }
#stats-rankings #performance-rank-refresh { padding:8px 12px; font-size:12px; white-space:nowrap; }
#stats-rankings .filter-row { display:flex; align-items:center; gap:16px; margin:0 0 12px; }
/* Five clearly separated, generous targets; no "all positions" control. The
   gold selected state also has a solid underline, so color is not the only cue. */
#stats-rankings #ranking-lanes { display:flex; flex:1; gap:8px; max-width:690px; border:0; padding:0; margin:0; background:none; overflow:visible; }
#stats-rankings #ranking-lanes button { flex:1; min-width:74px; min-height:48px; padding:12px 15px; position:relative; border:1px solid #526475; border-radius:6px; color:#c5d0dc; background:linear-gradient(180deg,#223142,#14202e); font-size:15px; font-weight:600; letter-spacing:2px; white-space:nowrap; box-shadow:inset 0 1px #ffffff08; }
#stats-rankings #ranking-lanes button:hover { border-color:#ccb077; color:#ffe4ae; background:#2d3032; }
#stats-rankings #ranking-lanes button[aria-selected="true"] { border-color:#efd395; color:#231d10; background:linear-gradient(130deg,#f3d99f,#c6a25d); box-shadow:0 0 18px #d4b27022,inset 0 1px #fff2c4; text-shadow:none; }
#stats-rankings #ranking-lanes button[aria-selected="true"]:after { content:""; position:absolute; height:3px; border-radius:2px; width:18px; bottom:4px; left:calc(50% - 9px); background:#564324; }
#stats-rankings .rank-search { display:flex; align-items:center; gap:8px; min-width:0; padding:6px 10px; border:1px solid #3a4b5a; border-radius:6px; background:#0c1721; }
#stats-rankings .rank-search svg { width:16px; height:16px; flex-shrink:0; stroke:#9bafc0; stroke-width:1.5; fill:none; }
#stats-rankings #rank-search { width:156px; min-width:0; padding:0; min-height:24px; border:0; border-radius:0; background:none; color:#e8edf4; font-size:12px; }
#stats-rankings #rank-search::placeholder { color:#8596a6; }
/* Search results remain announced to assistive technology without an extra row. */
#stats-rankings .ranking-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
#stats-rankings #performance-podium { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:0 0 19px; }
#stats-rankings #performance-podium:empty { display:none; }
#stats-rankings .rank-spotlight-card { position:relative; min-width:0; min-height:205px; padding:20px 20px 70px; overflow:hidden; border:1px solid #354450; border-radius:7px; background:linear-gradient(120deg,#1b2935,#101c27); }
#stats-rankings .rank-spotlight-card:first-child { border-color:#a68e5f99; background:radial-gradient(ellipse at 100% 100%,#ab852423,transparent 70%),linear-gradient(120deg,#2b2c24,#14202a); }
#stats-rankings .spotlight-rank { color:#d6bc87; font:11px Consolas,monospace; letter-spacing:2px; }
#stats-rankings .spotlight-rank small { margin-left:8px; color:#99a5ab; font-size:9px; letter-spacing:1px; }
#stats-rankings .spotlight-identity { margin-top:13px; }
#stats-rankings .spotlight-identity .rank-name { font-size:15px; }
#stats-rankings .spotlight-value { position:absolute; right:20px; bottom:37px; display:block; text-align:right; color:#f0d598; font:600 28px Consolas,monospace; line-height:1; }
#stats-rankings .spotlight-label { position:absolute; right:20px; bottom:18px; display:block; color:#97a7b6; font-size:10px; text-align:right; }
#stats-rankings .rank-spotlight-card>.rank-detail-button { position:absolute; left:20px; bottom:18px; border:0; padding:6px 0; background:none; font-size:10px; }
#stats-rankings .ranking-table-wrap { border:1px solid #354552; border-radius:8px; overflow:hidden; background:#0e1a24; }
#stats-rankings #performance-rank-table { overflow:auto; }
#stats-rankings .rank-table { width:100%; border-collapse:collapse; text-align:left; white-space:nowrap; font-size:13px; font-variant-numeric:tabular-nums; }
#stats-rankings .rank-table th { color:#a0b0bf; background:#182733; padding:14px 18px; font-size:11px; font-weight:500; border-bottom:1px solid #3a4a57; }
#stats-rankings .rank-table td { height:80px; padding:16px 18px; border-bottom:1px solid #2c3c49; vertical-align:middle; }
#stats-rankings .rank-table tr:last-child td { border-bottom:0; }
#stats-rankings .rank-table tbody tr:hover { background:#ffffff04; }
#stats-rankings .rank-table th:first-child { width:68px; }
#stats-rankings .rank-table td:last-child, #stats-rankings .rank-table th:last-child { text-align:right; }
#stats-rankings .rank-place { color:#cdb88b; font:16px Consolas,monospace; }
#stats-rankings .rank-identity { display:flex; align-items:center; gap:12px; min-width:140px; }
#stats-rankings .ranking-identity.rank-identity { display:flex; flex-direction:row; align-items:center; gap:12px; }
#stats-rankings .rank-identity .ranking-name-copy { align-items:flex-start; }
#stats-rankings .rank-identity>img { width:44px; height:44px; object-fit:cover; border:1px solid #5f6c77; border-radius:5px; }
#stats-rankings .rank-identity .decorated-avatar { width:42px; height:42px; flex-shrink:0; }
#stats-rankings .rank-identity .team-emblem { width:48px; height:48px; flex:0 0 48px; background:none; border:0; }
#stats-rankings .rank-identity .team-emblem img { width:100%; height:100%; max-width:none; object-fit:contain; border:0; border-radius:0; }
#stats-rankings .rank-copy { min-width:0; }
#stats-rankings .rank-name { display:block; font-size:13px; font-weight:500; color:#e8edf4; }
#stats-rankings .rank-subline { display:block; font-size:10px; line-height:1.6; color:#91a5b7; margin-top:5px; }
#stats-rankings .rank-copy .vip-badge { font-size:8px; min-height:15px; max-width:190px; margin-top:5px; }
#stats-rankings .rank-copy .nameplate-level, #stats-rankings .rank-copy .nameplate-meta { font-size:7px; }
#stats-rankings .rank-copy .prismatic-emblem { width:12px; height:17px; }
#stats-rankings .rank-number { color:#ecd3a0; font:600 21px Consolas,monospace; }
#stats-rankings .rank-cell-muted { color:#9baaba; font-size:11px; line-height:1.8; }
#stats-rankings .rank-detail-button { padding:8px 11px; border:1px solid #96805260; border-radius:4px; background:#c2a36507; color:#d4bc8e; font-size:11px; white-space:nowrap; }
#stats-rankings .rank-detail-button:hover { border-color:#bea16a; background:#d4b47116; }
#stats-rankings .rank-empty { padding:50px 24px; text-align:center; color:#9baebe; font-size:13px; }
#stats-rankings .sample-tag { display:inline-block; padding:2px 5px; margin-left:6px; border:1px solid #b2985a66; border-radius:3px; color:#cbbb99; font-size:9px; }
#stats-rankings .rank-hero-strip { display:flex; align-items:center; gap:4px; }
#stats-rankings .rank-hero-strip img { width:26px; height:26px; object-fit:cover; border-radius:3px; }
#stats-rankings .rank-hero-strip span { color:#97aabb; font-size:10px; margin-left:3px; }
#stats-rankings .team-power-members { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; min-width:270px; }
#stats-rankings .team-power-members span, #stats-rankings .team-power-members small, #stats-rankings .team-power-members b { display:block; }
#stats-rankings .team-power-members small { color:#91a4b4; font-size:9px; margin-bottom:5px; }
#stats-rankings .team-power-members b { font:13px Consolas,monospace; color:#dce3e9; }
#stats-rankings .rank-profit { color:#e5c78c; }
#stats-rankings .rank-loss { color:#d19cae; }
#stats-rankings .ranking-pending { visibility:hidden; }
#stats-rankings .ranking-dialog { width:min(720px,calc(100vw - 32px)); max-height:87vh; padding:0; border:1px solid #aa905f; border-radius:10px; background:linear-gradient(145deg,#172733,#0c1823); color:#c2cfdb; box-shadow:0 35px 100px #0008; overflow:auto; }
#stats-rankings .ranking-dialog::backdrop { background:#03070cd1; backdrop-filter:blur(5px); }
#stats-rankings .ranking-dialog>header { display:flex; align-items:center; justify-content:space-between; padding:22px 26px; margin:0; border-bottom:1px solid #3d4c58; }
#stats-rankings .ranking-dialog header small { font:9px Consolas,monospace; color:#cdb98c; letter-spacing:3px; }
#stats-rankings .ranking-dialog h2 { margin:7px 0 0; font-size:24px; color:#f0d7a1; }
#stats-rankings .ranking-dialog header button { width:34px; height:34px; padding:0; border:0; background:none; color:#bac9d5; font-size:24px; }
#stats-rankings #rules-body, #stats-rankings #detail-body { padding:22px 26px; line-height:1.9; font-size:13px; }
#stats-rankings .ranking-dialog h3 { color:#ead09a; font-size:15px; margin:18px 0 9px; }
#stats-rankings .ranking-dialog h3:first-child { margin-top:0; }
#stats-rankings .ranking-dialog p { margin:10px 0; }
#stats-rankings .ranking-dialog strong { color:#f1d8a2; }
#stats-rankings .ranking-dialog code { display:block; padding:13px; border:1px solid #89703f60; border-radius:4px; background:#d6b3740c; color:#efd4a0; font-size:14px; white-space:normal; }
#stats-rankings .ranking-dialog>footer { padding:15px 26px; border-top:1px solid #354451; color:#9bacbb; font-size:10px; }
#stats-rankings .rank-detail-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:20px 0; }
#stats-rankings .rank-detail-stat { padding:14px 12px; border:1px solid #455766; border-radius:5px; background:#ffffff03; }
#stats-rankings .rank-detail-stat small, #stats-rankings .rank-detail-stat span { display:block; font-size:10px; color:#9baaba; }
#stats-rankings .rank-detail-stat b, #stats-rankings .rank-detail-stat strong { display:block; margin-top:8px; font:22px Consolas,monospace; color:#e7d1a5; }
#stats-rankings .rank-detail-note { padding:9px 15px; border-left:2px solid #a78d55; background:#c7ab700a; font-size:12px; }
@media(max-width:1400px) {
  #stats-rankings { padding:22px; }
  #stats-rankings .ranking-groups>button { padding:15px 12px; gap:10px; }
  #stats-rankings .ranking-groups strong { font-size:16px; }
  #stats-rankings .ranking-groups svg { width:25px; height:25px; }
  #stats-rankings .rank-table td, #stats-rankings .rank-table th { padding-inline:12px; }
  #stats-rankings #ranking-subtabs { gap:18px; }
  #stats-rankings .rank-spotlight-card { padding:16px 16px 70px; }
  #stats-rankings #ranking-lanes button { min-width:68px; padding-inline:12px; }
}
@media(max-width:850px) {
  #stats-page #stats-rankings { padding:16px; }
  #stats-rankings .ranking-heading { flex-wrap:wrap; gap:12px; }
  #stats-rankings .ranking-heading h2 { font-size:28px; }
  #stats-rankings .ranking-event-selector { flex:1 0 265px; }
  #stats-rankings .ranking-groups { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  #stats-rankings .ranking-groups>button { min-height:58px; }
  #stats-rankings .board-toolbar { flex-wrap:wrap; gap:8px; padding-bottom:10px; }
  #stats-rankings #ranking-subtabs { width:100%; }
  #stats-rankings .ranking-toolbar-actions { width:100%; min-width:0; gap:8px; }
  #stats-rankings #performance-rank-refresh { padding-inline:8px; }
  #stats-rankings #rules-button { font-size:10px; }
  #stats-rankings .filter-row { flex-wrap:wrap; gap:12px; }
  #stats-rankings #ranking-lanes { flex-basis:100%; gap:5px; }
  #stats-rankings #ranking-lanes button { min-width:0; padding:10px 5px; font-size:13px; letter-spacing:1px; }
  #stats-rankings .rank-search { flex:1; }
  #stats-rankings #rank-search { width:100%; }
  #stats-rankings #performance-podium { gap:7px; }
  #stats-rankings .rank-spotlight-card { padding:12px 8px; min-height:255px; }
  #stats-rankings .spotlight-identity .ranking-identity.rank-identity { flex-direction:column; align-items:flex-start; gap:7px; min-width:0; }
  #stats-rankings .spotlight-identity .rank-name { font-size:11px; overflow-wrap:anywhere; }
  #stats-rankings .spotlight-identity .vip-badge { display:none; }
  #stats-rankings .spotlight-value { font-size:22px; left:8px; right:auto; bottom:62px; }
  #stats-rankings .spotlight-label { font-size:9px; left:8px; right:auto; bottom:43px; }
  #stats-rankings .rank-spotlight-card>.rank-detail-button { left:8px; bottom:12px; }
  #stats-rankings .rank-table { min-width:720px; }
  #stats-rankings .rank-detail-grid { grid-template-columns:repeat(2,1fr); }
}