/* ============================================================
   Chud — Neon Glass · Profile screen styles
   Styles the markup emitted by src/profile.js (op.gg-style profile).
   Uses the shared tokens in neon.css (magenta→cyan neon palette).
   ============================================================ */

.profile { display: flex; flex-direction: column; gap: 16px; }

.pf-sync {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted);
  padding: 2px 2px 0;
}
.pf-sync .endp { color: var(--cyan-soft); }
.pf-sync .dotsep { opacity: .5; }
.pf-sync .refresh {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  color: var(--text-secondary); padding: 5px 11px; border-radius: var(--r-sm);
  border: 1px solid var(--glass-border); transition: all .15s;
}
.pf-sync .refresh:hover { color: var(--text-primary); border-color: var(--line-strong); background: rgba(255,255,255,.05); }

/* ---- banner ---- */
.profile-banner-wrap { padding: 22px 26px; }
.pf-banner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 26px; }
@media (max-width: 820px) { .pf-banner { grid-template-columns: auto 1fr; } .pf-rank-emblem { grid-column: 1 / -1; } }

.pf-avatar { position: relative; width: 96px; height: 96px; }
.pf-avatar .hexmask {
  position: absolute; inset: 8px; overflow: hidden;
  clip-path: polygon(50% 2%, 95% 26%, 95% 74%, 50% 98%, 5% 74%, 5% 26%);
  background: var(--bg-inset); display: grid; place-items: center;
}
.pf-avatar .hexmask img { width: 100%; height: 100%; object-fit: cover; }
.pf-avatar .hexring { position: absolute; inset: 0; }
.pf-avatar .hexring polygon { stroke: var(--cyan); filter: drop-shadow(0 0 6px rgba(53,228,255,.5)); }
.pf-avatar .lvl {
  position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--text-dark);
  background: var(--neon-grad-h); padding: 2px 9px; border-radius: 20px; box-shadow: 0 4px 12px rgba(255,61,154,.35);
}

.pf-id { min-width: 0; }
.pf-name { display: flex; align-items: baseline; gap: 8px; }
.pf-name .gn { font-family: var(--font-display); font-weight: 700; font-size: 26px; color: var(--text-primary); }
.pf-name .tag { font-family: var(--font-mono); font-size: 14px; color: var(--text-muted); }
.pf-status-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.hotstreak { font-size: 11.5px; font-weight: 600; color: var(--amber); }
.pf-xp { display: flex; align-items: center; gap: 10px; margin-top: 12px; max-width: 420px; }
.pf-xp .bar { flex: 1; height: 6px; background: var(--bg-inset); border-radius: 4px; overflow: hidden; border: 1px solid var(--glass-border); }
.pf-xp .bar i { display: block; height: 100%; background: var(--neon-grad-h); }
.pf-xp .xptxt { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); white-space: nowrap; }

.pf-rank-emblem { display: flex; align-items: center; gap: 14px; }
.emblem { position: relative; display: grid; place-items: center; }
.emblem .etier { position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--text-primary); text-shadow: 0 1px 2px #000; }
.rank-meta { display: flex; flex-direction: column; gap: 3px; }
.rk-tier { font-family: var(--font-display); font-weight: 700; font-size: 17px; }
.rk-lp { font-size: 12px; color: var(--text-secondary); }
.rk-pct { font-size: 11px; color: var(--text-muted); }

/* ---- layout ---- */
.pf-layout { display: grid; grid-template-columns: 380px 1fr; gap: 16px; align-items: start; }
@media (max-width: 1040px) { .pf-layout { grid-template-columns: 1fr; } }
.pf-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pf-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }

/* ---- ranked queue rows ---- */
.qrow { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.qrow:last-child { border-bottom: none; }
.qname { font-size: 13px; color: var(--text-secondary); }
.qtier { font-family: var(--font-display); font-weight: 700; font-size: 15px; margin-top: 2px; }
.qlp { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.series-dots { display: flex; gap: 4px; }
.series-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--bg-inset); border: 1px solid var(--glass-border); }
.series-dots i.w { background: var(--green); border-color: var(--green); }
.series-dots i.l { background: var(--red); border-color: var(--red); }
.qwl { text-align: center; }
.wring { position: relative; display: inline-grid; place-items: center; }
.wring svg { display: block; }
.wring .wtxt { position: absolute; font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--text-primary); }
.qwl .wl { font-family: var(--font-mono); font-size: 11px; }
.qwl .wl .w { color: var(--green); } .qwl .wl .l { color: var(--red); }

/* ---- champion pool ---- */
.champ-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); }
.champ-row:last-child { border-bottom: none; }
.champ-sq { position: relative; width: 42px; height: 42px; border-radius: 10px; overflow: hidden; background: var(--bg-inset); border: 1px solid var(--glass-border); flex: 0 0 auto; }
.champ-sq img { width: 100%; height: 100%; object-fit: cover; }
.champ-sq .fallback { width: 100%; height: 100%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--text-secondary); }
.champ-sq .mast { position: absolute; bottom: 0; right: 0; font-family: var(--font-mono); font-size: 8px; font-weight: 700; color: var(--text-dark); background: var(--cyan); padding: 0 3px; border-top-left-radius: 5px; }
.champ-info .cn { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.champ-info .cm { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); margin-top: 2px; }
.champ-stat { text-align: right; }
.champ-stat .ckda { font-family: var(--font-mono); font-size: 13px; color: var(--text-primary); }
.champ-stat .cwr { font-family: var(--font-mono); font-size: 10.5px; margin-top: 2px; }

/* ---- performance summary ---- */
.perf-grid { display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: center; }
@media (max-width: 640px) { .perf-grid { grid-template-columns: 1fr; } }
.perf-ring { position: relative; display: grid; place-items: center; }
.perf-ring svg { display: block; }
.perf-ring .pr-center { position: absolute; text-align: center; }
.pr-wr { font-family: var(--font-mono); font-size: 28px; font-weight: 700; color: var(--text-primary); line-height: 1; }
.pr-wl { font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); margin-top: 4px; }
.pr-cap { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .12em; margin-top: 3px; }
.perf-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pm { display: flex; flex-direction: column; gap: 3px; }
.pm-label { font-size: 10.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .1em; }
.pm-val { font-family: var(--font-mono); font-size: 20px; font-weight: 700; color: var(--text-primary); }
.pm-val.gold { color: var(--cyan-soft); } .pm-val.teal { color: var(--cyan); }
.pm-sub { font-size: 10.5px; color: var(--text-muted); }
.kda-big .kk { color: var(--green); } .kda-big .dd { color: var(--red); } .kda-big .aa { color: var(--cyan); }
.roles { display: flex; flex-direction: column; gap: 8px; }
.role-row { display: grid; grid-template-columns: 66px 1fr 40px; align-items: center; gap: 10px; }
.role-row .rl { font-size: 12px; color: var(--text-secondary); }
.role-row .rbar { height: 6px; background: var(--bg-inset); border-radius: 4px; overflow: hidden; border: 1px solid var(--glass-border); }
.role-row .rbar i { display: block; height: 100%; background: var(--neon-grad-h); }
.role-row .rpct { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); text-align: right; }

/* ---- match history ---- */
.pf-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tab { display: inline-flex; align-items: center; gap: 7px; background: transparent; border: 1px solid var(--glass-border); color: var(--text-secondary); font-family: var(--font-ui); font-size: 12px; font-weight: 500; padding: 6px 12px; border-radius: var(--r-sm); cursor: pointer; transition: all .15s; }
.tab:hover { color: var(--text-primary); border-color: var(--line-strong); }
.tab.on { color: var(--text-dark); border-color: transparent; background: var(--neon-grad-h); font-weight: 700; }
.tab-n { font-family: var(--font-mono); font-size: 10px; background: rgba(0,0,0,.2); border-radius: 10px; padding: 0 6px; }
.tab.on .tab-n { background: rgba(0,0,0,.22); }

.match-list { display: flex; flex-direction: column; gap: 10px; }
.match { border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--glass-border); background: var(--glass); }
.match.win { border-left: 3px solid var(--cyan); }
.match.loss { border-left: 3px solid var(--red); }
.match-main { display: grid; grid-template-columns: 118px auto 1fr auto auto 24px; align-items: center; gap: 16px; padding: 13px 16px; cursor: pointer; transition: background .15s; }
.match-main:hover { background: rgba(255,255,255,.04); }
.m-result { display: flex; flex-direction: column; gap: 2px; }
.m-result .rlabel { font-family: var(--font-display); font-weight: 700; font-size: 14px; }
.match.win .m-result .rlabel { color: var(--cyan); } .match.loss .m-result .rlabel { color: var(--red); }
.m-result .rqueue { font-size: 11px; color: var(--text-secondary); }
.m-result .rtime { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); }
.m-result .rlp { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; }
.m-result .rlp.up { color: var(--green); } .m-result .rlp.dn { color: var(--red); }
.m-champ { position: relative; display: flex; align-items: center; gap: 6px; }
.m-champ .clvl { position: absolute; bottom: -2px; left: 30px; font-family: var(--font-mono); font-size: 9px; color: var(--text-secondary); background: var(--bg-inset); border-radius: 8px; padding: 0 4px; }
.spells { display: flex; flex-direction: column; gap: 3px; margin-left: 6px; }
.spells .sp { width: 18px; height: 18px; border-radius: 5px; overflow: hidden; background: var(--bg-inset); border: 1px solid var(--glass-border); }
.spells .sp img { width: 100%; height: 100%; }
.m-kda { text-align: center; }
.m-kda .kline { font-family: var(--font-mono); font-size: 15px; font-weight: 700; }
.m-kda .kd-k { color: var(--text-primary); } .m-kda .kd-d { color: var(--red); } .m-kda .kd-a { color: var(--cyan); } .m-kda .sl { color: var(--text-muted); margin: 0 2px; }
.m-kda .kratio { font-size: 10.5px; margin-top: 2px; display: flex; align-items: center; gap: 6px; justify-content: center; }
.m-kda .mvp { font-family: var(--font-mono); font-size: 9px; font-weight: 700; color: var(--text-dark); background: var(--magenta-soft); padding: 0 5px; border-radius: 4px; }
.m-stats { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); display: flex; flex-direction: column; gap: 3px; }
.m-stats b { color: var(--text-secondary); }
.m-items { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; }
.islot { width: 24px; height: 24px; border-radius: 5px; background: var(--bg-inset); border: 1px solid var(--glass-border); overflow: hidden; }
.islot.trinket { border-radius: 50%; }
.islot img { width: 100%; height: 100%; }
.m-expand { color: var(--text-muted); display: grid; place-items: center; }
.m-detail { display: none; grid-template-columns: 1fr 1fr; gap: 16px; padding: 14px 16px; border-top: 1px solid var(--line-soft); background: var(--bg-inset); }
.match.open .m-detail { display: grid; }
.match.open .m-expand { transform: rotate(180deg); }
.team-col .team-head { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
.sb-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 4px 0; font-size: 12px; }
.sb-row.me { background: rgba(255,61,154,.08); border-radius: 6px; padding: 4px 8px; margin: 0 -8px; }
.sb-row .champ-sq { width: 26px; height: 26px; border-radius: 7px; }
.sb-name { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-kda { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }

.emptystate { text-align: center; padding: 48px 24px; }