:root {
    --bg: #08090c; --bg2: #0e1015; --card: #12151c; --card2: #171b24; --line: rgba(255,255,255,.07); --line2: rgba(255,255,255,.12);
    --ink: #f1f3f7; --sub: #a2a9b7; --faint: #6c7383;
    --a1: #5fd4e6; --a2: #8b7bff; --gold: #f2c86b; --win: #5fe0a0; --loss: #ff6f7d; --na: #ff8a5c;
    --chall: #f2c86b; --gm: #ff6f7d; --master: #b48cff;
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body { margin: 0; background: var(--bg); color: var(--ink); font-family: "Segoe UI Variable Display", "Segoe UI", Inter, Roboto, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
  a { color: inherit; }
  button { font: inherit; color: inherit; cursor: pointer; }
  .num { font-variant-numeric: tabular-nums; }
  .grad { background: linear-gradient(90deg, var(--a1), var(--a2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .muted { color: var(--sub); font-size: 13px; }
  .faint { color: var(--faint); }

  /* Top bar */
  .top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 18px; padding: 10px 28px; background: rgba(8,9,12,.82); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
  .brand { font-weight: 850; font-size: 14px; letter-spacing: .02em; white-space: nowrap; }
  .brand span { color: var(--faint); font-weight: 600; margin: 0 6px; }
  .range { display: flex; gap: 2px; padding: 3px; background: #15181f; border-radius: 10px; margin: 0 auto; }
  .range button { border: 0; background: none; padding: 6px 12px; border-radius: 8px; font-size: 12.5px; color: var(--sub); }
  .range button[aria-pressed="true"] { background: var(--ink); color: #0b0c10; font-weight: 750; }
  .nav { display: flex; gap: 16px; font-size: 13px; margin-left: auto; } /* 2.150.42: no range switch; whole climb only */
  .nav a { text-decoration: none; color: var(--sub); } .nav a:hover { color: var(--ink); }
  .scan { border: 1px solid var(--line2); background: none; border-radius: 9px; padding: 6px 12px; font-size: 12.5px; color: var(--sub); white-space: nowrap; }
  .scan:hover { color: var(--ink); } .scan:disabled { opacity: .6; cursor: default; }

  /* Hero */
  .hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
  .splash { position: absolute; inset: 0; background-size: cover; background-position: center 22%; opacity: .32; filter: saturate(1.1); }
  .hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--bg) 8%, rgba(8,9,12,.72) 48%, rgba(8,9,12,.92) 100%), linear-gradient(0deg, var(--bg) 0%, transparent 45%); }
  .hero-in { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; padding: 54px 32px 40px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: end; }
  .eyebrow { font-size: 12px; font-weight: 750; letter-spacing: .16em; text-transform: uppercase; color: var(--sub); display: flex; gap: 10px; align-items: center; }
  .eyebrow b { color: var(--a1); }
  .who { margin: 10px 0 0; font-size: clamp(64px, 10vw, 140px); line-height: .86; font-weight: 900; letter-spacing: -.05em; outline: none; }
  .title2 { font-size: clamp(26px, 3.4vw, 44px); font-weight: 850; letter-spacing: -.03em; margin-top: 18px; line-height: 1.1; }
  .idline { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin-top: 18px; font-size: 14px; }
  .idline .id { font-weight: 700; }
  .pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 99px; border: 1px solid var(--line2); font-size: 12.5px; font-weight: 700; color: var(--sub); background: rgba(0,0,0,.25); }
  .pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
  .pill.live { color: var(--win); border-color: rgba(95,224,160,.4); } .pill.live i { background: var(--win); animation: pulse 1.6s infinite; }
  @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(95,224,160,.7); } 70% { box-shadow: 0 0 0 9px rgba(95,224,160,0); } 100% { box-shadow: 0 0 0 0 rgba(95,224,160,0); } }
  .links a { font-weight: 700; text-underline-offset: 4px; margin-right: 14px; font-size: 13.5px; }

  .rankcard { background: linear-gradient(160deg, rgba(23,27,36,.92), rgba(14,16,21,.92)); border: 1px solid var(--line2); border-radius: 20px; padding: 22px 24px; display: grid; gap: 10px; box-shadow: 0 30px 80px rgba(0,0,0,.45); }
  .rk-top { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
  .tier { font-size: 15px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
  .pos { margin-left: auto; font-size: 14px; font-weight: 800; padding: 4px 10px; border-radius: 99px; background: rgba(242,200,107,.12); color: var(--gold); }
  .lpbig { font-size: clamp(54px, 6.4vw, 84px); font-weight: 900; letter-spacing: -.045em; line-height: .9; }
  .lpbig small { font-size: 18px; font-weight: 700; color: var(--sub); letter-spacing: 0; margin-left: 6px; }
  .rk-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 6px; }
  .rk-stats div { background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
  .rk-stats b { display: block; font-size: 18px; font-weight: 850; } .rk-stats span { font-size: 11.5px; color: var(--sub); }

  main { max-width: 1280px; margin: 0 auto; padding: 0 32px 70px; }
  section { padding: 46px 0 6px; }
  .sh { display: flex; align-items: end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
  h2 { margin: 0; font-size: 28px; font-weight: 880; letter-spacing: -.03em; }
  .sh p { margin: 4px 0 0; color: var(--sub); font-size: 13.5px; max-width: 720px; }
  .seg { display: inline-flex; gap: 2px; padding: 3px; background: #15181f; border-radius: 9px; margin-left: auto; }
  .seg button { border: 0; background: none; padding: 5px 10px; border-radius: 7px; font-size: 12px; color: var(--sub); }
  .seg button[aria-pressed="true"] { background: #2a2f3a; color: var(--ink); font-weight: 700; }
  .card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 20px 22px; position: relative; }
  .two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  .card h3 { margin: 0 0 12px; font-size: 14px; font-weight: 800; letter-spacing: .02em; }

  /* Road to rank 1 */
  .road { padding: 26px 26px 20px; background: radial-gradient(1200px 200px at 80% -40%, rgba(242,200,107,.08), transparent), var(--card); }
  .road-head { display: flex; flex-wrap: wrap; gap: 8px 26px; align-items: baseline; margin-bottom: 26px; }
  .road-head .big { font-size: 22px; font-weight: 850; letter-spacing: -.02em; }
  .road-head .big b { color: var(--gold); }
  .track { position: relative; height: 14px; border-radius: 99px; background: #1b1f29; margin: 46px 6px 54px; }
  .track .seg-m, .track .seg-g, .track .seg-c { position: absolute; top: 0; bottom: 0; }
  .seg-m { background: linear-gradient(90deg, rgba(180,140,255,.25), rgba(180,140,255,.55)); border-radius: 99px 0 0 99px; }
  .seg-g { background: linear-gradient(90deg, rgba(255,111,125,.35), rgba(255,111,125,.7)); }
  .seg-c { background: linear-gradient(90deg, rgba(242,200,107,.4), rgba(242,200,107,.9)); border-radius: 0 99px 99px 0; }
  .tick { position: absolute; top: -8px; bottom: -8px; width: 2px; background: rgba(255,255,255,.35); }
  .tick span { position: absolute; top: 28px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 11.5px; color: var(--sub); text-align: center; line-height: 1.3; }
  .tick span b { display: block; color: var(--ink); font-size: 12.5px; }
  .mark { position: absolute; top: 50%; transform: translate(-50%, -50%); }
  .mark .dot { width: 22px; height: 22px; border-radius: 50%; background: var(--a1); border: 4px solid var(--bg); box-shadow: 0 0 0 2px var(--a1), 0 0 22px rgba(95,212,230,.6); }
  .mark.peak .dot { width: 14px; height: 14px; background: var(--gold); box-shadow: 0 0 0 2px var(--gold); border-width: 3px; }
  .mark.start .dot { width: 12px; height: 12px; background: #8a90a0; box-shadow: none; border-width: 3px; }
  .mark .lab { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 12px; font-weight: 800; padding: 3px 8px; border-radius: 7px; background: #0b0d12; border: 1px solid var(--line2); }
  .mark.peak .lab { color: var(--gold); bottom: 18px; } .mark.start .lab { color: var(--sub); font-weight: 600; bottom: 16px; }
  .mark .lab.low { bottom: auto; top: 22px; }
  .road-foot { display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: 13px; color: var(--sub); }
  .road-foot b { color: var(--ink); }

  /* Tiles */
  .tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
  .tile { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; display: grid; gap: 4px; align-content: start; }
  .tile b { display: block; font-size: 28px; font-weight: 880; letter-spacing: -.03em; }
  .tile span { font-size: 12px; color: var(--sub); }
  .ring { display: flex; gap: 14px; align-items: center; }
  .ring svg { flex: none; }

  /* Form strip */
  .form { display: flex; flex-wrap: wrap; gap: 4px; }
  .fg { width: 18px; height: 18px; border-radius: 4px; border: 0; padding: 0; }
  .fg.w { background: var(--win); } .fg.l { background: var(--loss); opacity: .85; }
  .fg:hover { outline: 2px solid var(--ink); outline-offset: 1px; }
  .fg.daybreak { margin-left: 8px; }

  /* Charts */
  .chart svg { display: block; width: 100%; height: auto; overflow: visible; }
  .chart text { fill: var(--faint); font-size: 11px; }
  .tip { position: absolute; pointer-events: none; background: #090a0d; border: 1px solid rgba(255,255,255,.16); border-radius: 10px; padding: 8px 11px; font-size: 12.5px; line-height: 1.5; white-space: nowrap; transform: translate(-50%, calc(-100% - 14px)); opacity: 0; transition: opacity .1s; z-index: 40; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
  .tip.on { opacity: 1; }
  .days { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(22px, 1fr); gap: 5px; align-items: end; height: 110px; margin-top: 8px; }
  .day { border: 0; padding: 0; background: none; height: 100%; display: flex; flex-direction: column; justify-content: end; gap: 2px; }
  .day i { display: block; border-radius: 3px; min-height: 0; }
  .day .w { background: var(--win); } .day .l { background: var(--loss); opacity: .8; }
  .day[aria-pressed="true"] { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
  .daylab { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(22px, 1fr); gap: 5px; font-size: 10.5px; color: var(--faint); text-align: center; margin-top: 6px; }
  .legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12px; color: var(--sub); margin-top: 10px; }
  .legend i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: 3px; }

  /* Records */
  .records { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .rec { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; display: grid; grid-template-columns: 44px 1fr; gap: 4px 12px; align-items: center; text-align: left; width: 100%; }
  button.rec:hover { border-color: var(--line2); background: var(--card2); }
  .rec img, .rec .ph { width: 44px; height: 44px; border-radius: 10px; grid-row: span 2; background: #1d2029; }
  .rec .lab { font-size: 11.5px; color: var(--sub); text-transform: uppercase; letter-spacing: .07em; font-weight: 700; }
  .rec .val { font-size: 20px; font-weight: 880; letter-spacing: -.02em; }
  .rec .val small { font-size: 12px; color: var(--faint); font-weight: 600; margin-left: 6px; letter-spacing: 0; }

  /* Rhythm */
  .hours { display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; align-items: end; height: 120px; }
  .hr { border-radius: 3px 3px 0 0; min-height: 2px; position: relative; }
  .hrlab { display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; font-size: 10px; color: var(--faint); text-align: center; margin-top: 6px; }
  .sess { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 16px; }
  .sess div { background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
  .sess b { display: block; font-size: 20px; font-weight: 850; } .sess span { font-size: 11.5px; color: var(--sub); }
  .nth { display: grid; gap: 8px; }
  .nth-row { display: grid; grid-template-columns: 92px 1fr 70px; gap: 12px; align-items: center; font-size: 13px; }
  .nth-bar { height: 10px; border-radius: 99px; background: rgba(255,111,125,.25); overflow: hidden; }
  .nth-bar i { display: block; height: 100%; background: var(--win); }

  /* Champions */
  .crow { display: grid; grid-template-columns: 38px 1fr 50px 60px 64px; gap: 12px; align-items: center; padding: 8px 6px; border-radius: 10px; font-size: 13.5px; }
  .crow:hover { background: rgba(255,255,255,.03); }
  .crow img, .crow .ph { width: 38px; height: 38px; border-radius: 9px; background: #1d2029; }
  .crow .nm b { display: block; font-weight: 750; } .crow .nm small { color: var(--faint); font-size: 11.5px; }
  .crow .r { text-align: right; } .crow .wr { font-weight: 850; }
  .wbar { height: 4px; border-radius: 9px; background: rgba(255,111,125,.3); overflow: hidden; margin-top: 5px; }
  .wbar i { display: block; height: 100%; background: var(--win); }
  .chead { display: grid; grid-template-columns: 38px 1fr 50px 60px 64px; gap: 12px; padding: 0 6px 6px; font-size: 10.5px; color: var(--faint); text-transform: uppercase; letter-spacing: .07em; }
  .chead span:nth-child(n+3) { text-align: right; }
  .more { border: 1px solid var(--line2); background: none; border-radius: 9px; padding: 6px 12px; font-size: 12.5px; color: var(--sub); margin-top: 10px; }
  .roles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; font-size: 12px; color: var(--sub); }
  .roles button { padding: 4px 10px; border: 1px solid var(--line); border-radius: 99px; background: none; color: var(--sub); font-size: 12px; }
  .roles button:hover { border-color: var(--line2); color: var(--ink); }
  .roles button[aria-pressed="true"] { background: rgba(95,212,230,.14); border-color: rgba(95,212,230,.5); color: var(--ink); font-weight: 700; }

  /* People */
  .prow { display: flex; align-items: center; gap: 10px; padding: 7px 6px; border-radius: 9px; font-size: 13.5px; }
  .prow:hover { background: rgba(255,255,255,.03); }
  .prow .nm a { text-decoration: none; } .prow .nm a:hover { text-decoration: underline; }
  .prow .nm { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .prow .nm small { color: var(--faint); font-weight: 500; }
  .prow .rc { margin-left: auto; font-weight: 850; white-space: nowrap; }
  .chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .chip { padding: 5px 11px; border-radius: 99px; background: #171a22; border: 1px solid var(--line); font-size: 12.5px; }
  .chip.pro { border-color: rgba(242,200,107,.45); color: var(--gold); }

  /* Averages */
  .avg { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
  .avg div { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
  .avg b { display: block; font-size: 22px; font-weight: 880; letter-spacing: -.02em; }
  .avg span { font-size: 12px; color: var(--sub); }

  /* Games table */
  .filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
  select { background: #15181f; color: var(--ink); border: 1px solid var(--line2); border-radius: 9px; padding: 6px 9px; font: inherit; font-size: 12.5px; }
  table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
  th { text-align: left; font-size: 10.5px; font-weight: 750; color: var(--faint); text-transform: uppercase; letter-spacing: .07em; padding: 8px; border-bottom: 1px solid var(--line); }
  td { padding: 9px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
  tr.g { cursor: pointer; } tr.g:hover td { background: rgba(255,255,255,.025); }
  tr.g.flash td { animation: flash 1.4s ease; }
  @keyframes flash { 0%, 40% { background: rgba(95,212,230,.14); } 100% { background: none; } }
  .cc { display: flex; align-items: center; gap: 10px; }
  .cc img, .cc .ph { width: 30px; height: 30px; border-radius: 8px; background: #1d2029; }
  .cc small { display: block; color: var(--faint); font-size: 11.5px; }
  .res { font-weight: 850; } .res.w { color: var(--win); } .res.l { color: var(--loss); }
  tr.det td { background: #0d0f14; padding: 14px 16px 16px; }
  .det-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px 18px; font-size: 13px; }
  .det-grid b { display: block; font-size: 16px; } .det-grid span { color: var(--faint); font-size: 11.5px; }
  .teams { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 14px; font-size: 12.5px; color: var(--sub); }
  .teams h4 { margin: 0 0 4px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; }
  .pager { display: flex; gap: 8px; align-items: center; justify-content: flex-end; margin-top: 12px; font-size: 12.5px; color: var(--sub); }
  .pager button { border: 1px solid var(--line2); background: none; border-radius: 8px; padding: 5px 11px; }
  .pager button:disabled { opacity: .4; cursor: default; }
  /* 2.150.29: full match */
  .mx-head { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: baseline; margin-bottom: 12px; font-size: 13px; color: var(--sub); }
  .mx-head b { font-size: 16px; color: var(--ink); }
  .mx-teams { display: grid; gap: 14px; }
  .mx-team { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
  .mx-team.w { border-color: rgba(95,224,160,.3); } .mx-team.l { border-color: rgba(255,111,125,.25); }
  .mx-bar { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; padding: 8px 12px; background: rgba(255,255,255,.03); font-size: 12px; color: var(--sub); }
  .mx-bar .tn { font-weight: 850; font-size: 13px; }
  .mx-bar .bans { display: flex; gap: 3px; margin-left: auto; align-items: center; }
  .mx-bar .bans img { width: 20px; height: 20px; border-radius: 4px; filter: grayscale(1) brightness(.7); }
  .mx { width: 100%; border-collapse: collapse; font-size: 12.5px; }
  .mx td { padding: 6px 8px; border-bottom: 1px solid var(--line); }
  .mx tr:last-child td { border-bottom: 0; }
  .mx tr.me td { background: rgba(95,212,230,.07); }
  .mx .pc { display: flex; align-items: center; gap: 6px; min-width: 0; }
  .mx .ch { position: relative; flex: none; } .mx .ch img { width: 32px; height: 32px; border-radius: 7px; display: block; }
  .mx .ch i { position: absolute; right: -4px; bottom: -4px; font-style: normal; font-size: 9.5px; font-weight: 800; background: #0b0d12; border-radius: 6px; padding: 0 3px; border: 1px solid var(--line2); }
  .mx .sp { display: grid; gap: 2px; flex: none; } .mx .sp img { width: 15px; height: 15px; border-radius: 3px; display: block; }
  .mx .nmc { min-width: 0; } .mx .nmc b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px; }
  .mx .nmc small { color: var(--faint); font-size: 11px; }
  .mx .its { display: flex; gap: 2px; } .mx .its img, .mx .its span { width: 22px; height: 22px; border-radius: 4px; background: #1b1f28; display: block; }
  .mx .dm { min-width: 90px; } .mx .dm div { height: 5px; border-radius: 9px; background: rgba(255,255,255,.07); margin-top: 3px; overflow: hidden; } .mx .dm div i { display: block; height: 100%; background: var(--na); }
  .mx .w-dm div i { background: var(--a1); }
  .mx-gold { margin-top: 14px; }
  .mx-gold svg { display: block; width: 100%; height: auto; }
  .mx-gold text { fill: var(--faint); font-size: 10.5px; }
  /* champion drill-down */
  .crow.click { cursor: pointer; }
  .cdrill { margin: 4px 0 10px 50px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.02); display: grid; gap: 12px; font-size: 12.5px; }
  .cdrill h4 { margin: 0 0 6px; font-size: 10.5px; color: var(--faint); text-transform: uppercase; letter-spacing: .07em; }
  .ilist { display: flex; flex-wrap: wrap; gap: 10px; }
  .ilist div { display: grid; justify-items: center; gap: 2px; font-size: 10.5px; color: var(--sub); }
  .ilist img { width: 30px; height: 30px; border-radius: 6px; }
  /* milestones */
  .miles { position: relative; display: grid; gap: 2px; padding-left: 26px; }
  .miles::before { content: ""; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(var(--a1), var(--a2)); opacity: .5; border-radius: 2px; }
  .mile { position: relative; display: grid; grid-template-columns: 90px 1fr; gap: 12px; padding: 7px 0; font-size: 13.5px; }
  .mile::before { content: ""; position: absolute; left: -22px; top: 12px; width: 10px; height: 10px; border-radius: 50%; background: var(--bg); border: 2px solid var(--a1); }
  .mile.gold::before { border-color: var(--gold); background: var(--gold); }
  .mile .dt { color: var(--faint); font-variant-numeric: tabular-nums; }
  .mile b { font-weight: 800; }
  /* 2.150.30 */
  .lad { display: grid; gap: 4px; font-size: 13px; }
  .lad-row { display: grid; grid-template-columns: 64px 1fr 180px 80px; gap: 10px; padding: 6px 8px; border-radius: 8px; align-items: center; }
  .lad-row.me { background: rgba(95,212,230,.1); outline: 1px solid rgba(95,212,230,.35); }
  .lad-row .p { color: var(--faint); font-variant-numeric: tabular-nums; }
  .lad-row.top1 { background: rgba(242,200,107,.08); outline: 1px solid rgba(242,200,107,.3); }
  .lad-row.top1 .n, .lad-row.top1 .p { color: var(--gold); }
  .lad-gap { text-align: center; color: var(--faint); font-size: 11.5px; padding: 4px 0; letter-spacing: .05em; }
  .lad-row .n a { text-decoration: none; } .lad-row .n a:hover { text-decoration: underline; }
  .mx .nmc b a { text-decoration: none; } .mx .nmc b a:hover { text-decoration: underline; }
  .lad-row .n { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lad-row .r { text-align: right; font-variant-numeric: tabular-nums; }
  .r1 { display: grid; gap: 10px; align-content: start; }
  .r1 .who1 { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
  .r1 .who1 b { font-size: 22px; font-weight: 880; color: var(--gold); } .r1 .who1 b a { color: inherit; text-decoration: none; } .r1 .who1 b a:hover { text-decoration: underline; }
  .r1 svg { width: 100%; height: auto; display: block; } .r1 text { fill: var(--faint); font-size: 11px; }
  .proj { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: 13px; color: var(--sub); }
  .proj b { color: var(--ink); }
  .tagc { display: inline-block; font-size: 9.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 1px 5px; border-radius: 5px; margin-left: 5px; vertical-align: 1px; background: rgba(242,200,107,.15); color: var(--gold); }
  .tagc.st { background: rgba(139,123,255,.18); color: #b3a8ff; }
  .rk { font-size: 10.5px; font-weight: 700; color: var(--sub); }
  .mx-tl { display: grid; grid-template-columns: 240px 1fr; gap: 18px; margin-top: 16px; align-items: start; }
  .kmap { position: relative; width: 240px; height: 240px; border-radius: 12px; overflow: hidden; background-size: cover; border: 1px solid var(--line2); }
  .kmap i { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; border: 2px solid #08090c; }
  .kmap i.k { background: var(--win); } .kmap i.d { background: var(--loss); } .kmap i.s { background: var(--gold); }
  .bo { display: flex; flex-wrap: wrap; gap: 8px; } .bo div { display: grid; justify-items: center; font-size: 10.5px; color: var(--faint); gap: 2px; } .bo img { width: 28px; height: 28px; border-radius: 6px; }
  .lanec { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
  .lanec div { background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font-size: 12px; color: var(--sub); }
  .lanec b { display: block; font-size: 15px; color: var(--ink); }
  .pwrap { position: relative; }
  .pwrap.folded { max-height: 400px; overflow: hidden; }
  .pwrap.folded::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(rgba(18,21,28,0), var(--card) 85%); pointer-events: none; }
  .pmore { display: flex; justify-content: center; margin-top: 4px; }
  .procards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
  .pcard { display: grid; grid-template-columns: 52px 1fr; gap: 6px 12px; align-items: center; padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--card2); text-align: left; width: 100%; }
  button.pcard:hover { border-color: var(--line2); }
  .pcard .av { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; background: #1d2029; grid-row: span 2; display: block; }
  .pcard .nm { font-weight: 800; font-size: 14px; } .pcard .tm { font-size: 11.5px; color: var(--sub); display: flex; align-items: center; gap: 5px; }
  .pcard .tm img { width: 14px; height: 14px; object-fit: contain; }
  .pcard .rc { grid-column: 1 / -1; display: flex; gap: 12px; font-size: 12px; color: var(--sub); }
  .livecard { margin-top: 18px; padding: 14px 16px; border-radius: 16px; border: 1px solid rgba(95,224,160,.35); background: rgba(10,14,12,.75); display: grid; gap: 10px; max-width: 640px; }
  .livecard .lt { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--sub); }
  .livecard .lt b { color: var(--win); font-size: 14px; }
  .liveteams { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .liveteams .lp { display: flex; align-items: center; gap: 7px; font-size: 12px; padding: 3px 0; min-width: 0; }
  .liveteams .lp img { width: 24px; height: 24px; border-radius: 6px; flex: none; }
  .liveteams .lp .nmx { display: flex; align-items: center; gap: 6px; min-width: 0; }
  .liveteams .lp .nmx a, .liveteams .lp .nmx > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
  .liveteams .lp .nmx a:hover { text-decoration: underline; }
  .liveteams .lp .tagc { margin-left: 0; flex: none; vertical-align: 0; }
  .liveteams .lp.me .nmx > span { color: var(--a1); font-weight: 800; }
  .liveteams .lp small { color: var(--faint); margin-left: auto; white-space: nowrap; }
  input.search { background: #15181f; color: var(--ink); border: 1px solid var(--line2); border-radius: 9px; padding: 6px 10px; font: inherit; font-size: 12.5px; min-width: 240px; }
  .how { color: var(--sub); font-size: 13.5px; line-height: 1.7; max-width: 820px; }
  .empty { padding: 60px 32px; color: var(--sub); }

  @media (max-width: 1000px) {
    .hero-in, .two { grid-template-columns: minmax(0, 1fr); }
    .hero-in > * { min-width: 0; }
    .tiles { grid-template-columns: repeat(3, 1fr); }
    .records { grid-template-columns: repeat(2, 1fr); }
    .avg { grid-template-columns: repeat(3, 1fr); }
    .nav { display: none; }
  }
  @media (max-width: 620px) {
    .tiles, .sess { grid-template-columns: repeat(2, 1fr); }
    .records, .avg { grid-template-columns: 1fr 1fr; }
    main, .hero-in { padding-left: 18px; padding-right: 18px; }
    .range button { padding: 6px 8px; }
    /* 2.150.44: nothing wider than a phone screen */
    .hero-in, .two { grid-template-columns: minmax(0, 1fr); }
    .hero-in > * { min-width: 0; }
    .liveteams { grid-template-columns: minmax(0, 1fr); }
    .rk-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .records, .avg, .tiles, .sess { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rec { grid-template-columns: 44px minmax(0, 1fr); } .rec > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .crow { grid-template-columns: 34px minmax(0, 1fr) 40px 50px 56px; gap: 8px; }
    .lad-row { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 8px; } .lad-row > :nth-child(4) { display: none; }
    #games .card { overflow-x: auto; }
  }