/* ── layout ───────────────────────────────── */
.pl-wrap { max-width:960px; margin:0 auto; padding:1rem 0 4rem; }

/* sticky header: only the tab nav sticks when scrolling */
.pl-sticky-header {
    position:sticky; top:var(--navbar-h, 52px); z-index:50;
    background:var(--bg); padding-bottom:0.15rem;
    margin-bottom:-0.15rem;
}

/* compensate for sticky tab nav height so content isn't clipped */
.pl-tab-panel { padding-top:1rem; }
/* ── section labels ───────────────────────── */
.pl-sec {
    font-size:0.65rem; text-transform:uppercase; letter-spacing:0.7px;
    color:var(--text-dim); margin:1.4rem 0 0.55rem 0.1rem;
}

/* ── generic cards ────────────────────────── */
.pl-card {
    background:var(--card);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:10px;
    padding:1rem;
}
.pl-card-label {
    font-size:0.62rem; text-transform:uppercase; letter-spacing:0.5px;
    color:var(--text-dim); margin-bottom:0.3rem;
}
.pl-card-value { font-size:1.15rem; font-weight:700; }

/* ── stat grids ───────────────────────────── */
.pl-g3 { display:grid; grid-template-columns:repeat(3,1fr); gap:0.6rem; }
.pl-g2 { display:grid; grid-template-columns:repeat(2,1fr); gap:0.6rem; }

/* ── header ───────────────────────────────── */
.pl-header {
    display:flex; gap:1.25rem; align-items:center;
    background:var(--card); border:1px solid rgba(255,255,255,0.08);
    border-radius:12px; padding:1.25rem 1.4rem; margin-bottom:1rem;
}
.pl-avatar {
    width:72px; height:72px; border-radius:10px;
    object-fit:cover; flex-shrink:0;
    background:rgba(255,255,255,0.05);
}
.pl-avatar-fallback {
    width:72px; height:72px; border-radius:10px; flex-shrink:0;
    background:rgba(255,255,255,0.05); display:flex;
    align-items:center; justify-content:center;
    font-size:1.8rem; color:var(--text-dim);
}

/* ── brawler grid ─────────────────────────── */
.pl-brawler-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(210px,1fr));
    gap:0.5rem;
}
.pl-bc {
    background:var(--card); border:1px solid rgba(255,255,255,0.08);
    border-radius:10px; overflow:hidden;
}
.pl-bc-top {
    display:flex; gap:0.6rem; align-items:center; padding:0.6rem;
}
.pl-bc-portrait {
    width:46px; height:46px; border-radius:7px; object-fit:cover;
    flex-shrink:0; background:rgba(255,255,255,0.05);
}
.pl-bc-portrait-ph {
    width:46px; height:46px; border-radius:7px; flex-shrink:0;
    background:rgba(255,255,255,0.05); display:flex;
    align-items:center; justify-content:center;
    font-size:0.6rem; color:var(--text-dim); text-align:center;
    padding:4px;
}
.pl-bc-name { font-size:0.85rem; font-weight:700; margin-bottom:0.2rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pl-bc-badges { display:flex; gap:0.3rem; flex-wrap:wrap; align-items:center; }
.pl-badge {
    font-size:0.6rem; border-radius:5px; padding:0.12rem 0.35rem;
    background:rgba(255,255,255,0.07); color:var(--text-dim);
    white-space:nowrap;
}
.pl-badge.gold { background:rgba(255,185,0,0.15); color:var(--primary); }
.pl-badge.cyan { background:rgba(34,211,238,0.12); color:#22d3ee; }
.pl-badge.green { background:rgba(74,222,128,0.12); color:#4ade80; }

/* icon-with-number overlay */
.pl-icon-badge {
    position:relative; display:inline-flex; align-items:center; justify-content:center;
    width:30px; height:30px; flex-shrink:0;
}
.pl-icon-badge img {
    width:30px; height:30px; object-fit:contain;
}
.pl-icon-badge .pl-icon-num {
    position:absolute;
    bottom:50%; right:50%; transform:translate(50%, calc(50% - 1px));
    font-size:0.65rem; font-weight:800; line-height:1;
    color:#fff; text-shadow:0 0 3px rgba(0,0,0,0.9), 0 1px 2px rgba(0,0,0,0.8);
    pointer-events:none;
}

/* trophy strip mini-icons */
.pl-tc-icon {
    width:13px; height:13px; object-fit:contain; opacity:0.75;
    vertical-align:middle; margin-right:2px;
}

/* pro team badge */
.pl-pro-team-link {
    display:flex; align-items:center; gap:0.4rem; margin-top:0.5rem;
    text-decoration:none; background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.09); border-radius:6px;
    padding:0.35rem 0.55rem; transition:background 0.15s, border-color 0.15s;
    width:fit-content;
}
.pl-pro-team-link:hover {
    background:rgba(255,255,255,0.1);
    border-color:rgba(255,255,255,0.2);
}

/* trophy strip */
.pl-bc-trophies {
    display:grid; grid-template-columns:repeat(3,1fr);
    border-top:1px solid rgba(255,255,255,0.06);
}
.pl-tc {
    padding:0.35rem 0; text-align:center;
    border-right:1px solid rgba(255,255,255,0.06);
}
.pl-tc:last-child { border-right:none; }
.pl-tc-label { font-size:0.5rem; text-transform:uppercase; letter-spacing:0.4px; color:var(--text-dim); }
.pl-tc-val { font-size:0.8rem; font-weight:700; }

/* accessories section */
.pl-bc-accessories {
    border-top:1px solid rgba(255,255,255,0.06);
    padding:0.45rem 0.7rem;
    display:flex; justify-content:space-around; align-items:center;
}
.pl-acc-row { display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap; }
.pl-acc-label { font-size:0.6rem; text-transform:uppercase; letter-spacing:0.4px;
    color:var(--text-dim); width:60px; flex-shrink:0; }
.pl-acc-items { display:flex; gap:0.4rem; flex-wrap:wrap; }
.pl-acc-item { display:flex; align-items:center; gap:0.3rem; }
.pl-acc-icon {
    width:28px; height:28px; border-radius:5px; object-fit:contain;
    background:rgba(255,255,255,0.05);
}
.pl-acc-icon-ph {
    width:28px; height:28px; border-radius:5px;
    background:rgba(255,255,255,0.05);
}
.pl-acc-name { font-size:0.68rem; color:var(--text); }

/* gear level pip */
.pl-gear-lv {
    font-size:0.58rem; background:rgba(255,185,0,0.2); color:var(--primary);
    border-radius:3px; padding:0.05rem 0.3rem; margin-left:2px; font-weight:700;
}

/* ── esport stats section ─────────────────── */
.es-grid {
    display:grid; grid-template-columns:repeat(auto-fit,minmax(145px,1fr)); gap:0.75rem;
    margin-bottom:1.25rem;
}
.es-card {
    background:var(--card); border:1px solid rgba(255,255,255,0.08);
    border-radius:10px; padding:0.9rem 1rem;
    display:flex; flex-direction:column; gap:0.4rem;
}
.es-label {
    font-size:0.62rem; text-transform:uppercase; letter-spacing:0.5px;
    color:var(--text-dim); font-weight:700;
}
.es-value { font-size:1.6rem; font-weight:800; line-height:1; }
.es-bar-track {
    height:5px; background:rgba(255,255,255,0.08); border-radius:3px; overflow:hidden;
}
.es-bar-fill { height:100%; border-radius:3px; }
.es-bar-green  { background:#10b981; }
.es-bar-yellow { background:#fbbf24; }
.es-bar-red    { background:#f87171; }
.es-bar-blue   { background:var(--primary); }
.es-sub { font-size:0.67rem; color:var(--text-dim); }

.es-streak {
    display:inline-flex; align-items:center; gap:0.3rem;
    padding:0.25rem 0.65rem; border-radius:20px;
    font-size:0.75rem; font-weight:700; align-self:flex-start;
}
.es-streak-win  { background:rgba(16,185,129,0.14); color:#10b981; border:1px solid rgba(16,185,129,0.28); }
.es-streak-loss { background:rgba(248,113,113,0.14); color:#f87171; border:1px solid rgba(248,113,113,0.28); }
.es-streak-none { background:rgba(255,255,255,0.05); color:var(--text-dim); border:1px solid rgba(255,255,255,0.1); }

/* brawler highlight pair */
.es-bhl-pair {
    display:grid; grid-template-columns:1fr 1fr; gap:0.65rem; margin-bottom:1.25rem;
}
.es-bhl {
    background:var(--card); border:1px solid rgba(255,255,255,0.08);
    border-radius:10px; padding:0.75rem 0.9rem;
    display:flex; align-items:center; gap:0.65rem;
    text-decoration:none; color:inherit; transition:all 0.15s ease;
}
.es-bhl:hover { background:rgba(255,255,255,0.07); border-color:var(--primary); }
.es-bhl-lbl { font-size:0.58rem; text-transform:uppercase; letter-spacing:0.4px; color:var(--text-dim); margin-bottom:0.1rem; }
.es-bhl-img { width:40px; height:40px; object-fit:contain; flex-shrink:0; }
.es-bhl-info { flex:1; min-width:0; }
.es-bhl-name { font-size:0.87rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.es-bhl-picks { font-size:0.67rem; color:var(--text-dim); }
.es-bhl-wr { font-size:1.15rem; font-weight:800; flex-shrink:0; }

/* mode distribution */
.es-mode-row { display:flex; align-items:center; gap:0.65rem; margin-bottom:0.45rem; }
.es-mode-icon { width:20px; height:20px; object-fit:contain; flex-shrink:0; }
.es-mode-name { font-size:0.8rem; font-weight:600; width:105px; flex-shrink:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.es-mode-track { flex:1; height:7px; background:rgba(255,255,255,0.07); border-radius:4px; overflow:hidden; }
.es-mode-fill { height:100%; border-radius:4px; background:var(--primary); opacity:0.75; }
.es-mode-meta { font-size:0.68rem; color:var(--text-dim); flex-shrink:0; width:88px; text-align:right; }

/* activity heatmap */
.es-act-grid {
    display:flex; gap:3px; overflow-x:auto; padding-bottom:3px;
}
.es-act-grid::-webkit-scrollbar { height:3px; }
.es-act-grid::-webkit-scrollbar-track { background:transparent; }
.es-act-grid::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.14); border-radius:2px; }

.es-act-cell {
    width:17px; height:17px; border-radius:3px; flex-shrink:0;
    position:relative; cursor:default; transition:transform 0.1s ease;
}
.es-act-cell:hover { transform:scale(1.4); z-index:5; }

.es-act-0             { background:rgba(255,255,255,0.06); }
.es-act-1.es-act-win  { background:rgba(16,185,129,0.35); }
.es-act-1.es-act-loss { background:rgba(248,113,113,0.30); }
.es-act-1.es-act-mix  { background:rgba(251,191,36,0.35); }
.es-act-2.es-act-win  { background:rgba(16,185,129,0.62); }
.es-act-2.es-act-loss { background:rgba(248,113,113,0.57); }
.es-act-2.es-act-mix  { background:rgba(251,191,36,0.57); }
.es-act-3.es-act-win  { background:rgba(16,185,129,0.90); }
.es-act-3.es-act-loss { background:rgba(248,113,113,0.85); }
.es-act-3.es-act-mix  { background:rgba(251,191,36,0.82); }

.es-act-cell[title]:hover::after {
    content:attr(title); position:absolute; bottom:calc(100% + 5px); left:50%;
    transform:translateX(-50%); background:rgba(0,0,0,0.88); color:#fff;
    padding:0.2rem 0.45rem; border-radius:5px; font-size:0.63rem;
    white-space:nowrap; pointer-events:none; z-index:20;
}
.es-act-legend {
    display:flex; align-items:center; gap:0.45rem; margin-top:0.5rem;
    font-size:0.63rem; color:var(--text-dim);
}
.es-leg-dot { width:10px; height:10px; border-radius:2px; display:inline-block; flex-shrink:0; }

.es-subsec-title {
    font-size:0.67rem; text-transform:uppercase; letter-spacing:0.6px;
    font-weight:700; color:var(--text-dim); margin:0 0 0.65rem;
}

/* color-coded WR */
.es-wr-s { color:#10b981; }
.es-wr-a { color:#84cc16; }
.es-wr-b { color:#fbbf24; }
.es-wr-c { color:#fb923c; }
.es-wr-d { color:#f87171; }
.es-wr-f { color:#dc2626; }

@media (max-width:640px) {
    .es-bhl-pair { grid-template-columns:1fr; }
    .es-grid { grid-template-columns:repeat(2,1fr); }
    .es-act-cell { width:13px; height:13px; }
    .es-mode-name { width:80px; font-size:0.72rem; }
}

/* buffies dots */
.pl-buffies {
    border-top:1px solid rgba(255,255,255,0.06);
    padding:0.5rem 0.9rem;
    display:flex; gap:0.9rem; flex-wrap:wrap;
}
.pl-buffy { font-size:0.65rem; color:var(--text-dim); display:flex; align-items:center; gap:0.3rem; }
.pl-dot { width:7px; height:7px; border-radius:50%; }
.pl-dot.on  { background:#4ade80; }
.pl-dot.off { background:rgba(255,255,255,0.15); }

/* streak / prestige strip */
.pl-bc-extra {
    border-top:1px solid rgba(255,255,255,0.06);
    display:grid; grid-template-columns:repeat(3,1fr);
}

/* ranked card */
.pl-ranked {
    display:flex; justify-content:space-between; flex-wrap:wrap;
    gap:1.25rem; background:var(--card);
    border:1px solid rgba(255,255,255,0.08); border-radius:10px; padding:1rem 1.25rem;
}
.pl-rank-val { font-size:1rem; font-weight:700; }
.pl-rank-elo { font-size:0.78rem; color:var(--text-dim); margin-top:0.15rem; }

/* search bar */
.pl-searchbar {
    display:flex; gap:0.5rem; margin-bottom:2rem;
    position:relative;
}
.pl-searchbar input {
    flex:1; background:var(--card); border:1px solid rgba(255,255,255,0.08);
    border-radius:8px; padding:0.7rem 1rem; color:var(--text);
    font-size:0.95rem; outline:none;
}
.pl-searchbar button {
    background:var(--primary); color:var(--bg); border:none;
    border-radius:8px; padding:0.7rem 1.4rem; font-weight:700;
    font-size:0.9rem; cursor:pointer;
}
.pl-suggest-box {
    position:absolute; top:calc(100% + 4px); left:0;
    right:0; background:var(--card);
    border:1px solid rgba(255,255,255,0.12); border-radius:9px;
    overflow-y:auto; max-height:184px; z-index:200; display:none;
    box-shadow:0 16px 48px rgba(0,0,0,0.65);
    scrollbar-width:thin; scrollbar-color:rgba(var(--primary-rgb),0.3) transparent;
}
.pl-suggest-box::-webkit-scrollbar { width:4px; }
.pl-suggest-box::-webkit-scrollbar-track { background:transparent; }
.pl-suggest-box::-webkit-scrollbar-thumb { background:rgba(var(--primary-rgb),0.3); border-radius:4px; }
.pl-suggest-box::-webkit-scrollbar-thumb:hover { background:rgba(var(--primary-rgb),0.5); }
.pl-suggest-item {
    display:flex; align-items:center; gap:0.6rem;
    padding:0.55rem 0.85rem; cursor:pointer;
    text-decoration:none; color:var(--text);
    border-bottom:1px solid rgba(255,255,255,0.05);
    transition:background 0.1s;
}
.pl-suggest-item:last-child { border-bottom:none; }
.pl-suggest-item:hover, .pl-suggest-item.sg-active { background:rgba(255,255,255,0.07); }
.pl-suggest-icon { width:28px; height:28px; border-radius:5px; object-fit:contain; flex-shrink:0; background:rgba(255,255,255,0.05); }
.pl-suggest-name { font-size:0.88rem; font-weight:600; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pl-suggest-tag  { font-size:0.7rem; color:var(--text-dim); margin-top:1px; }
.pl-suggest-troph { font-size:0.74rem; color:var(--text-dim); display:flex; align-items:center; gap:3px; flex-shrink:0; }

/* sort bar */
.pl-sort-bar {
    display:flex; align-items:center; gap:0.35rem; margin-bottom:0.75rem; flex-wrap:wrap;
}
.pl-sort-bar > span {
    font-size:0.75rem; font-weight:700; color:var(--text-dim);
    text-transform:uppercase; letter-spacing:0.5px; margin-right:0.2rem;
}
.pl-sort-btn {
    background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1);
    color:var(--text-dim); border-radius:6px; padding:0.3rem 0.6rem;
    font-size:0.65rem; font-weight:600; cursor:pointer; transition:all 0.2s ease;
    display:flex; align-items:center; gap:0.25rem;
}
.pl-sort-btn:hover { background:rgba(255,255,255,0.1); border-color:rgba(255,255,255,0.2); color:var(--text); }
.pl-sort-btn.active { background:var(--primary); border-color:var(--primary); color:var(--bg); }
.pl-sort-icon { font-size:0.6rem; transition:transform 0.2s ease; }
.pl-sort-btn.ascending .pl-sort-icon { transform:rotate(180deg); }

/* GitHub-style heatmap */
.pl-hm-grid {
    display:grid; grid-template-rows:repeat(7,13px);
    grid-auto-flow:column; grid-auto-columns:13px; gap:3px;
}
.pl-hm-cell { border-radius:2px; cursor:default; }
.pl-hm-cell:hover { outline:1px solid rgba(255,255,255,0.3); }
.pl-hm-0 { background:rgba(255,255,255,0.07); }
.pl-hm-1 { background:rgba(74,222,128,0.28); }
.pl-hm-2 { background:rgba(74,222,128,0.52); }
.pl-hm-3 { background:rgba(74,222,128,0.77); }
.pl-hm-4 { background:rgba(74,222,128,1.00); }

/* ── tab nav ──────────────────────────────── */
.pl-panel-ad-wrap {
    width:100%;
    margin:0 auto 1rem;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}
.pl-panel-ad-label {
    margin-bottom:0.28rem;
    color:var(--text-dim);
    font-size:0.55rem;
    line-height:1;
    letter-spacing:0.08em;
    text-transform:uppercase;
}
.pl-panel-ad-unit {
    display:block;
    width:100%;
    height:100px;
}
@media (min-width:800px) {
    .pl-panel-ad-unit { height:90px; }
}

.pl-tab-nav {
    display:flex; margin-bottom:0;
    border-bottom:2px solid rgba(255,255,255,0.07);
}
.pl-tab-btn {
    background:none; border:none; color:var(--text-dim); cursor:pointer;
    font-size:0.9rem; font-weight:600; padding:0.55rem 1.2rem 0.6rem;
    border-bottom:2px solid transparent; margin-bottom:-2px;
    transition:color 0.15s, border-color 0.15s;
}
.pl-tab-btn:hover { color:var(--text); }
.pl-tab-btn.active { color:var(--primary); border-bottom-color:var(--primary); }

/* ── badges ───────────────────────────────── */
.pl-badges-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
    gap:0.6rem;
    padding-top:0.3rem;
}
@media(max-width:600px){ .pl-badges-grid { grid-template-columns:repeat(auto-fill, minmax(110px, 1fr)); gap:0.4rem; } }
.pl-badge {
    background:var(--card);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:10px;
    padding:0.7rem 0.5rem 0.55rem;
    display:flex; flex-direction:column; align-items:center; gap:0.3rem;
    text-align:center;
    transition:transform 0.12s, border-color 0.12s, background 0.12s;
}
.pl-badge:hover { transform:translateY(-1px); border-color:rgba(var(--primary-rgb), 0.35); }
.pl-badge.pl-badge-curated {
    border-color:rgba(var(--primary-rgb), 0.45);
    background:linear-gradient(180deg, rgba(var(--primary-rgb), 0.10), rgba(var(--primary-rgb), 0.02));
    box-shadow:0 2px 14px rgba(var(--primary-rgb), 0.12);
}
.pl-badge-icon {
    width:52px; height:52px; object-fit:contain;
    filter:drop-shadow(0 2px 6px rgba(0,0,0,0.35));
}
.pl-badge.pl-badge-curated .pl-badge-icon { width:60px; height:60px; }
.pl-badge.pl-badge-locked { opacity:0.45; }
.pl-badge.pl-badge-locked:hover { opacity:0.7; border-color:rgba(255,255,255,0.14); }
.pl-badge.pl-badge-locked .pl-badge-icon { filter:grayscale(1) brightness(0.7); }
.pl-badge.pl-badge-locked .pl-badge-value { color:var(--text-dim); }
.pl-badge-icon-fallback {
    width:52px; height:52px; border-radius:8px;
    background:rgba(255,255,255,0.05);
    border:1px dashed rgba(255,255,255,0.12);
    display:flex; align-items:center; justify-content:center;
    color:rgba(255,255,255,0.25); font-size:1.5rem; font-weight:700;
}
.pl-badge-value {
    font-size:1rem; font-weight:800; line-height:1.1; color:var(--text);
    letter-spacing:-0.2px;
}
.pl-badge-label {
    font-size:0.7rem; color:var(--text-dim); line-height:1.2;
    text-transform:uppercase; letter-spacing:0.4px;
    width:100%; overflow-wrap:break-word; white-space:normal; hyphens:auto;
}
.pl-badge-sublabel {
    font-size:0.65rem; color:rgba(255,255,255,0.35); margin-top:-0.1rem;
    width:100%; overflow-wrap:break-word; white-space:normal;
}
.pl-badges-empty {
    text-align:center; color:var(--text-dim); padding:2rem;
    font-size:0.9rem;
}
.pl-badges-section-title {
    font-size:0.72rem; color:var(--text-dim); font-weight:700;
    text-transform:uppercase; letter-spacing:0.8px;
    margin:0 0 0.55rem 0.1rem;
}

/* ── battle log ───────────────────────────── */
.bl-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0.35rem; }
@media(max-width:600px){ .bl-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:380px){ .bl-grid { grid-template-columns:1fr; } }
.bl-row {
    display:flex; flex-direction:column; gap:0.25rem;
    background:var(--card); border:1px solid rgba(255,255,255,0.07);
    border-radius:8px; padding:0.45rem 0.55rem 0;
    cursor:pointer; transition:background 0.12s, border-color 0.12s;
    overflow:hidden;
}
.bl-row:hover { background:rgba(var(--primary-rgb),0.06); border-color:rgba(var(--primary-rgb),0.28); }
.bl-row-top { display:flex; align-items:center; gap:0.35rem; flex-wrap:nowrap; }
.bl-row-info { display:flex; flex-direction:column; flex:1; min-width:0; }
.bl-mapname { font-size:0.58rem; color:var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bl-mode-icon { width:30px; height:30px; object-fit:contain; border-radius:5px; flex-shrink:0; background:rgba(255,255,255,0.05); padding:2px; }
.bl-mode-label { font-size:0.58rem; font-weight:700; color:var(--text-dim); white-space:nowrap; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.bl-result { font-size:0.6rem; font-weight:700; padding:0.1rem 0.35rem; border-radius:4px; white-space:nowrap; flex-shrink:0; }
.bl-result.victory { background:rgba(74,222,128,0.15); color:#4ade80; }
.bl-result.defeat  { background:rgba(248,113,113,0.15); color:#f87171; }
.bl-result.draw    { background:rgba(156,163,175,0.12); color:#9ca3af; }
.bl-map-img { width:calc(100% + 1.1rem); margin:0 -0.55rem; height:72px; object-fit:cover; background:rgba(255,255,255,0.04); display:block; }
.bl-row-bot { display:flex; align-items:center; gap:0.35rem; }
.bl-brawler-wrap { position:relative; flex-shrink:0; width:26px; height:26px; }
.bl-brawler-img { width:26px; height:26px; object-fit:contain; }
.bl-star-badge { position:absolute; bottom:-4px; right:-4px; width:13px; height:13px; object-fit:contain; }
.bl-map { font-size:0.75rem; font-weight:600; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bl-trophy { font-size:0.68rem; font-weight:700; white-space:nowrap; flex-shrink:0; display:flex; align-items:center; gap:2px; }
.bl-trophy.pos { color:#4ade80; }
.bl-trophy.neg { color:#f87171; }
.bl-trophy.zero { color:var(--text-dim); }
.bl-time { font-size:0.58rem; color:var(--text-dim); white-space:nowrap; }
.bl-time-result { display:flex; align-items:center; gap:0.35rem; flex-shrink:0; }
.bl-scrim-btn { font-size:0.55rem; font-weight:700; padding:0.1rem 0.3rem; border-radius:4px; background:rgba(var(--primary-rgb),.15); color:var(--primary); border:1px solid rgba(var(--primary-rgb),.3); white-space:nowrap; text-decoration:none; flex-shrink:0; }

/* ── battle detail modal ──────────────────── */
.bl-detail-overlay {
    display:none; position:fixed; inset:0;
    background:rgba(0,0,0,0.78); z-index:200;
    align-items:center; justify-content:center;
    padding:1rem; touch-action:none; overscroll-behavior:none;
}
.bl-detail-overlay.open { display:flex; }
.bl-detail-modal {
    background:var(--card); border-radius:16px;
    width:100%; max-width:820px;
    max-height:min(90vh,calc(100dvh - 2rem));
    overflow:hidden; display:flex; flex-direction:column;
    border:1px solid rgba(255,255,255,0.1);
    box-shadow:0 24px 80px rgba(0,0,0,0.7);
}
.bl-detail-header {
    flex-shrink:0; position:relative;
    padding:0.9rem 2.5rem 1rem;
    border-bottom:1px solid rgba(255,255,255,0.07);
    display:flex; align-items:stretch;
    min-height:3.2rem;
}
#bl-modal-header-content { width:100%; }
.bl-detail-close {
    position:absolute; top:0.75rem; right:1rem;
    background:rgba(255,255,255,0.06); border:none; color:var(--text-dim);
    font-size:0.85rem; cursor:pointer; line-height:1; padding:0.3rem 0.55rem;
    border-radius:6px; z-index:1; transition:background 0.12s, color 0.12s;
}
.bl-detail-close:hover { background:rgba(255,255,255,0.12); color:var(--text); }
.bl-detail-body {
    flex:1; min-height:0; overflow-y:auto;
    padding:1rem 1.25rem 1.5rem;
    scrollbar-width:thin;
    scrollbar-color:rgba(var(--primary-rgb),0.3) transparent;
}
.bl-detail-body::-webkit-scrollbar { width:4px; }
.bl-detail-body::-webkit-scrollbar-thumb { background:rgba(var(--primary-rgb),0.3); border-radius:4px; }

/* ── battle log detail redesign (bld-) ── */
.bld-hdr-icon { width:36px; height:36px; object-fit:contain; flex-shrink:0; }
.bld-hdr-info { flex:1; min-width:0; }
.bld-hdr-mode { font-size:0.95rem; font-weight:800; color:var(--text); }
.bld-hdr-sub  { font-size:0.72rem; color:var(--text-dim); margin-top:0.1rem; display:flex; align-items:center; gap:0.4rem; }
.bld-result-badge {
    display:inline-flex; align-items:center; gap:0.35rem;
    padding:0.3rem 0.75rem; border-radius:8px;
    font-size:0.8rem; font-weight:800; text-transform:uppercase; letter-spacing:0.4px;
    white-space:nowrap; flex-shrink:0;
}
.bld-result-badge.victory { background:rgba(16,185,129,0.12); color:#10b981; border:1px solid rgba(16,185,129,0.25); }
.bld-result-badge.defeat  { background:rgba(248,113,113,0.12); color:#f87171; border:1px solid rgba(248,113,113,0.25); }
.bld-result-badge.draw    { background:rgba(156,163,175,0.08); color:#9ca3af; border:1px solid rgba(156,163,175,0.18); }

/* map banner */
.bld-map-banner {
    position:relative; width:100%; height:110px;
    border-radius:10px; overflow:hidden; margin-bottom:1rem;
    background:rgba(0,0,0,0.3);
}
.bld-map-banner img { width:100%; height:100%; object-fit:cover; display:block; }
.bld-map-overlay {
    position:absolute; inset:0;
    background:linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 60%);
    display:flex; align-items:flex-end; padding:0.6rem 0.85rem; gap:0.5rem;
}
.bld-map-name-text { font-size:0.78rem; font-weight:600; color:rgba(255,255,255,0.85); }

/* team labels */
.bld-teams-grid {
    display:grid; grid-template-columns:1fr 1fr; gap:0.75rem;
}
.bld-team-label {
    font-size:0.6rem; font-weight:700; text-transform:uppercase;
    letter-spacing:1.2px; color:var(--text-dim); margin-bottom:0.45rem;
}

/* player card (2-team) */
.bld-pcard {
    display:flex; align-items:center; gap:0.6rem;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.07);
    border-radius:10px; padding:0.55rem 0.7rem;
    margin-bottom:0.35rem; position:relative;
    transition:border-color 0.12s;
}
.bld-pcard.me { border-color:rgba(var(--primary-rgb),0.45); background:rgba(var(--primary-rgb),0.07); }
.bld-pcard-img-wrap { position:relative; flex-shrink:0; }
.bld-pcard-img {
    width:56px; height:56px; object-fit:contain;
    border-radius:8px; background:rgba(0,0,0,0.35); display:block;
}
.bld-pcard-star {
    position:absolute; bottom:-5px; right:-5px;
    width:20px; height:20px; object-fit:contain;
}
.bld-pcard-info { flex:1; min-width:0; }
.bld-pcard-brawler { font-size:0.82rem; font-weight:800; color:var(--text); text-transform:uppercase; letter-spacing:0.3px; }
.bld-pcard-player  { font-size:0.74rem; color:rgba(255,255,255,0.45); margin-top:0.08rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bld-pcard-trophies {
    display:flex; align-items:center; gap:3px;
    font-size:0.7rem; font-weight:700; color:var(--text-dim); margin-top:0.22rem;
}
.bld-pcard-ranked-img { width:28px; height:28px; object-fit:contain; margin-top:0.1rem; }

/* SD rows */
.bld-sd-list { display:flex; flex-direction:column; gap:0.3rem; }
.bld-sd-row {
    display:flex; align-items:center; gap:0.65rem;
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.06);
    border-radius:10px; padding:0.5rem 0.75rem;
}
.bld-sd-row.me { border-color:rgba(var(--primary-rgb),0.4); background:rgba(var(--primary-rgb),0.07); }
.bld-sd-place {
    font-size:1rem; font-weight:900; min-width:30px;
    text-align:center; flex-shrink:0; color:var(--text-dim);
    letter-spacing:-0.5px;
}
.bld-sd-place.gold   { color:#FFD700; }
.bld-sd-place.silver { color:#C0C0C0; }
.bld-sd-place.bronze { color:#CD7F32; }
.bld-sd-img {
    width:44px; height:44px; object-fit:contain;
    border-radius:7px; background:rgba(0,0,0,0.3); flex-shrink:0;
}
.bld-sd-info { flex:1; min-width:0; }
.bld-sd-brawler { font-size:0.8rem; font-weight:800; color:var(--text); text-transform:uppercase; }
.bld-sd-player  { font-size:0.7rem; color:rgba(255,255,255,0.42); margin-top:0.05rem; }
.bld-sd-tc {
    font-size:0.78rem; font-weight:700; flex-shrink:0;
    display:flex; align-items:center; gap:3px;
}

/* Duo SD pair */
.bld-duo-pair { display:flex; gap:0.5rem; flex:1; min-width:0; }
.bld-duo-player { display:flex; align-items:center; gap:0.45rem; flex:1; min-width:0; }
.bld-duo-img { width:38px; height:38px; object-fit:contain; border-radius:6px; background:rgba(0,0,0,0.3); flex-shrink:0; }
.bld-duo-info { min-width:0; }
.bld-duo-brawler { font-size:0.72rem; font-weight:800; color:var(--text); text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bld-duo-player-name { font-size:0.65rem; color:rgba(255,255,255,0.4); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

@media (max-width:520px) {
    .bld-teams-grid { grid-template-columns:1fr !important; }
    .bld-pcard-img { width:42px !important; height:42px !important; }
    /* modal: tighter padding on small phones */
    .bl-detail-overlay { padding:0.4rem; }
    .bl-detail-modal { border-radius:10px; }
    .bl-detail-header { padding:0.65rem 1.75rem 0.7rem; }
    .bl-detail-body { padding:0.6rem 0.6rem 1rem; }
    .bld-map-banner { height:80px; }
    /* preview cards: hide mode label and map name; show time inside the info area */
    .bl-result { font-size:0.55rem; padding:0.08rem 0.28rem; }
    .bl-mode-label { display:none; }
    .bl-mapname { display:none; }
    /* time above result: stack them in a column */
    .bl-time { font-size:0.55rem; }
    .bl-time-result { flex-direction:column; align-items:flex-end; gap:0.1rem; }
}

/* scrim modal inner classes (shared) */
.sm-header { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:0.4rem; margin-top:0.25rem; }
.sm-header-left  { display:flex; align-items:center; gap:0.5rem; justify-content:flex-end; min-width:0; }
.sm-header-right { display:flex; align-items:center; gap:0.5rem; justify-content:flex-start; min-width:0; }
.sm-logo { width:44px; height:44px; object-fit:contain; flex-shrink:0; }
.sm-name { font-size:1.05rem; font-weight:800; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sm-score-centre { display:flex; flex-direction:column; align-items:center; gap:0.15rem; flex-shrink:0; padding:0 0.3rem; }
.sm-score { font-size:2rem; font-weight:900; color:#fff; line-height:1; display:flex; align-items:center; gap:0.25rem; }
.sm-time { font-size:0.62rem; color:var(--text-dim); display:flex; align-items:center; gap:3px; }
.sm-sets-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:0.45rem; }
.sm-game-card { background:var(--dark); border:1px solid rgba(255,255,255,0.07); border-radius:10px; overflow:hidden; }
.sm-game-header { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:0.4rem; padding:0.4rem 0.75rem; border-bottom:1px solid rgba(255,255,255,0.06); }
.sm-gh-team { display:flex; align-items:center; gap:0.65rem; }
.sm-gh-team.left  { justify-content:flex-start; }
.sm-gh-team.right { justify-content:flex-end; }
.sm-gh-score { font-size:1rem; font-weight:900; line-height:1; }
.sm-gh-score.win  { color:#10b981; }
.sm-gh-score.loss { color:#9ca3af; }
.sm-gh-score.draw { color:#9ca3af; }
.sm-gh-centre { display:flex; flex-direction:column; align-items:center; gap:0.08rem; }
.sm-gh-mode { display:flex; align-items:center; gap:0.25rem; }
.sm-gh-mode-icon { width:18px; height:18px; object-fit:contain; flex-shrink:0; }
.sm-gh-mode-name { font-size:0.72rem; font-weight:700; color:var(--text-dim); white-space:nowrap; }
.sm-gh-map { font-size:0.6rem; color:rgba(255,255,255,0.35); white-space:nowrap; }
.sm-set-ago { font-size:0.58rem; color:rgba(255,255,255,0.28); white-space:nowrap; margin-top:0.05rem; }
.sm-game-body { display:grid; grid-template-columns:1fr 200px 1fr; gap:0; align-items:center; }
.sm-brawler-side { display:flex; flex-direction:column; gap:0.5rem; padding:0.6rem 0.4rem; justify-content:center; }
.sm-brawler-side.left  { align-items:flex-end; }
.sm-brawler-side.right { align-items:flex-start; }
.sm-game-body--3v3 .sm-brawler-side.left  { align-items:flex-start; }
.sm-game-body--3v3 .sm-brawler-side.right { align-items:flex-end; }
.sm-gh-logo { width:20px; height:20px; object-fit:contain; flex-shrink:0; }
.sm-brawler-row { display:flex; align-items:center; gap:0.5rem; }
.sm-brawler-row.right { flex-direction:row-reverse; }
.sm-brawler-img { width:52px; height:52px; object-fit:contain; border-radius:8px; flex-shrink:0; background:rgba(0,0,0,0.3); }
.sm-brawler-info { display:flex; flex-direction:column; min-width:0; }
.sm-brawler-name { font-size:0.95rem; font-weight:700; color:var(--text); white-space:nowrap; text-transform:uppercase; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.sm-player-name  { font-size:0.78rem; color:rgba(255,255,255,0.45); white-space:nowrap; display:flex; align-items:center; gap:3px; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.sm-brawler-info.right { align-items:flex-end; }
.sm-map-centre { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:0.4rem 0; gap:0.3rem; }
/* rank badge: inline on desktop, corner overlay on mobile */
.sm-rank-overlay { display:none; position:absolute; bottom:-5px; right:-5px; width:20px; height:20px; object-fit:contain; }
.sm-map-img { width:198px; border-radius:8px; border:1px solid rgba(255,255,255,0.1); display:block; }
.sm-map-name { font-size:0.58rem; color:rgba(255,255,255,0.3); text-align:center; max-width:198px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

@media (max-width:640px) {
    .sm-sets-grid { grid-template-columns:1fr !important; }
    .sm-game-body { grid-template-columns:minmax(0,1fr) 80px minmax(0,1fr) !important; }
    .sm-brawler-img { width:32px !important; height:32px !important; }
    .sm-brawler-name { font-size:0.58rem !important; max-width:70px !important; }
    .sm-player-name  { font-size:0.5rem !important; max-width:70px !important; }
    .sm-map-img  { width:100% !important; }
    .sm-map-name { max-width:100% !important; }
    /* rank badge: hide from text line, show as corner overlay */
    .sm-rank-inline  { display:none !important; }
    .sm-rank-overlay { display:block !important; }
}

/* Desktop default: short skin labels hidden, full labels shown */
.pl-skin-lbl-short { display: none; }
.pl-skin-lbl-full  { display: inline; }

@media (max-width:600px) {
    .pl-profile-row { flex-direction:column !important; }
    /* Switch the left profile card to a grid so the Profile Card button
       naturally sits below the content instead of next to it in a flex row */
    .pl-profile-row > div:first-child {
        width:100% !important;
        display:grid !important;
        grid-template-columns:54px 1fr !important;
        gap:0.35rem 0.85rem !important;
        padding:1rem !important;
        text-align:left !important;
        align-items:start !important;
    }
    .pl-stats-grid { grid-template-columns:repeat(2,1fr) !important; }
    .pl-wrap { padding:0.75rem 0 3rem; }
    .pl-searchbar input { font-size:0.85rem; }
    /* Ranked section: centre icons instead of space-between pushing them to edges */
    .pl-ranked { justify-content:center !important; gap:1.5rem !important; }
}
@media (max-width:420px) {
    .pl-stats-grid { grid-template-columns:1fr 1fr !important; }
    .pl-tab-btn { font-size:0.78rem; padding:0.5rem 0.8rem 0.55rem; }
    /* very narrow: same as mobile — ranked full, no dist */
    .pl-charts-wrap {
        grid-template-areas:
            "trophy   trophy"
            "wr       wr"
            "heatmap  training"
            "ranked   ranked" !important;
    }
}

/* unified charts grid — PC: 2 rows × 3 cols using named areas */
.pl-charts-wrap {
    display:grid;
    gap:0.65rem;
    align-items:stretch;
    grid-template-columns: 1fr 1fr auto;
    grid-template-areas:
        "trophy wr     heatmap"
        "ranked dist   training";
}
.pl-charts-wrap > .pl-chart-trophy        { grid-area: trophy; }
.pl-charts-wrap > .pl-chart-wr            { grid-area: wr; }
.pl-charts-wrap > .pl-heatmap-col         { grid-area: heatmap; }
.pl-charts-wrap > .pl-chart-ranked        { grid-area: ranked; }
.pl-charts-wrap > .pl-chart-lvldist       { grid-area: dist; }
.pl-charts-wrap > .pl-training-scores-col { grid-area: training; }
.pl-training-scores-col .pl-sec { margin-top: 0; }
.pl-training-scores-inner { display:grid; gap:.6rem; }

/* ── mobile: pro team + trophies reorder + rnt-extras layout + charts ── */
@media (max-width:600px) {
    /* disable sticky tab nav on mobile so scroll flows through naturally */
    .pl-sticky-header { position:relative !important; top:auto !important; }

    /* trophies: keep position */
    .pl-trophy-mobile-wrap { margin-top:0 !important; }

    /* pro team: hide in original position, show below trophies */
    .pl-pro-team-link-original { display:none !important; }
    /* pro team mobile: shown inside .pl-lcc-right only */

    /* Avatar: column 1. Pro needs row span 1/3 (button below), non-pro row 1 only */
    .pl-profile-row > div:first-child > div:first-child {
        grid-column: 1 !important;
        grid-row: 1 !important;
        align-self: center !important;
        justify-self: center !important;
    }
    /* Content area: column 2, row 1 */
    .pl-left-card-content {
        grid-column: 2 !important;
        grid-row: 1 !important;
        align-self: start !important;
    }
    /* Main button hidden for non-pro (replaced by inline club button) */
    .pc-open-btn:not(.pc-open-btn-club) { display:none !important; }
    /* Pro: restore full-width button below content */
    .pl-left-card-content.pl-has-pro ~ .pc-open-btn:not(.pc-open-btn-club) {
        display:block !important;
        grid-column: 2 !important;
        grid-row: 2 !important;
        width: 100% !important;
        margin-top: 0 !important;
    }
    /* Inline club button: non-pro only, hidden by default */
    .pc-open-btn-club { display:none !important; }
    /* Non-pro mobile: tag row → 2-col grid  col1=tag/club  col2=trophies/button */
    .pl-left-card-content:not(.pl-has-pro) .pl-tag-row {
        display:grid !important;
        grid-template-columns:1fr auto !important;
        justify-content:unset !important;
        align-items:center !important;
        gap:0.2rem 0.5rem !important;
    }
    .pl-left-card-content:not(.pl-has-pro) .pl-tag-row > code {
        grid-column:1; grid-row:1; justify-self:start;
    }
    .pl-left-card-content:not(.pl-has-pro) .pl-lcc-club {
        grid-column:1; grid-row:2;
        justify-self:start !important;
        justify-content:flex-start !important;
        margin-top:0 !important; width:auto !important;
    }
    .pl-left-card-content:not(.pl-has-pro) .pc-open-btn-club {
        grid-column:2; grid-row:2;
        display:inline-flex !important; justify-content:center; align-items:center;
        justify-self:center;
        font-size:0.7rem !important; padding:0.22rem 0.6rem !important;
        border-radius:6px !important; margin-top:0 !important; white-space:nowrap;
    }
    /* Club name: fill left col, truncate if very long */
    .pl-lcc-club span { min-width:0 !important; max-width:none !important; overflow:hidden; text-overflow:ellipsis; }
    /* Pro-team desktop link already hidden; keep it out of grid flow */
    .pl-pro-team-link-original { display:none !important; }

    /* left card: let the parent grid rule own gap; just reset flex-level properties */
    .pl-left-card { align-items:start !important; }

    /* content area right of avatar: 2-col grid [name/tag/club | trophies/pro] */
    .pl-left-card-content {
        display:grid !important;
        grid-template-columns: 1fr auto !important;
        align-items:start !important;
        gap:0.15rem 0.4rem !important;
        text-align:left !important;
        min-width:0;
    }
    /* left sub-col: name smaller, truncate, left-align */
    .pl-lcc-left { text-align:left; min-width:0; overflow:hidden; }
    .pl-lcc-left > div:first-child { font-size:0.92rem !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .pl-lcc-left code { font-size:0.68rem !important; }
    .pl-lcc-club { justify-content:flex-start !important; }
    .pl-lcc-club span { font-size:0.65rem !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:90px; }
    /* tag row: left-align on mobile */
    .pl-lcc-left .pl-tag-row { justify-content:flex-start !important; }

    /* non-pro mobile: show inline trophies in tag row, hide right col, single column */
    .pl-left-card-content:not(.pl-has-pro) { grid-template-columns:1fr !important; }
    .pl-left-card-content:not(.pl-has-pro) .pl-lcc-right { display:none !important; }
    .pl-left-card-content:not(.pl-has-pro) .pl-tag-trophy-inline {
        display:flex !important; grid-column:2; grid-row:1; justify-self:center;
    }

    /* right sub-col: trophies smaller, truncate if needed, pro badge styled */
    .pl-lcc-right { display:flex; flex-direction:column; align-items:flex-start; gap:0.25rem; flex-shrink:0; }
    /* trophy icon smaller */
    .pl-lcc-right > div > img { width:18px !important; height:18px !important; }
    /* trophy number smaller + clamp */
    .pl-lcc-right > div > div > div:first-child {
        font-size:0.95rem !important;
        white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:70px;
    }
    /* trophy label smaller */
    .pl-lcc-right > div > div > div:last-child { font-size:0.52rem !important; }
    /* pro team button: compact pill style */
    .pl-lcc-right .pl-pro-team-mobile {
        display:flex !important;
        padding:0.2rem 0.35rem !important;
        gap:0.3rem !important;
        border-radius:5px;
        align-items:center;
    }
    .pl-lcc-right .pl-pro-team-mobile img { width:14px !important; height:14px !important; }
    .pl-lcc-right .pl-pro-team-mobile > div > div:first-child { font-size:0.45rem !important; letter-spacing:0.3px; }
    .pl-lcc-right .pl-pro-team-mobile > div > div:last-child  { font-size:0.62rem !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:65px; }
    .pl-lcc-right .pl-pro-team-mobile > div { text-align:center; }
    /* avatar smaller on mobile */
    .pl-left-card .pl-avatar,
    .pl-left-card .pl-avatar-fallback { width:54px !important; height:54px !important; }
    #pl-bp-badge { width:24px !important; height:24px !important; bottom:-5px !important; right:-5px !important; }

    /* rnt-extras: Record Level + Record Points on row 1, Mastery + R35 on row 2 */
    .pl-rnt-extras-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* skins strip: 3-col stack on mobile */
    .pl-skins-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.35rem !important;
    }
    .pl-skins-grid .pl-card { padding: 0.5rem 0.6rem !important; gap: 0.4rem !important; }
    .pl-skins-grid .pl-card img { width: 22px !important; height: 22px !important; }
    .pl-skins-grid .pl-card-value { font-size: 0.85rem !important; }
    /* mobile uses the short label variant */
    .pl-skins-grid .pl-skin-lbl-full  { display: none !important; }
    .pl-skins-grid .pl-skin-lbl-short { display: inline !important; }

    /* mobile: trophy full, wr full, heatmap+training side by side,
       ranked elo full width, brawlers-by-power chart hidden. */
    .pl-charts-wrap {
        grid-template-columns: 1fr 1fr !important;
        grid-template-areas:
            "trophy   trophy"
            "wr       wr"
            "ranked   ranked"
            "heatmap  training" !important;
    }
    .pl-charts-wrap > .pl-chart-lvldist { display: none !important; }
    .pl-heatmap-col { overflow-x: auto; min-width: 0; }
    .pl-training-scores-inner { grid-template-rows: auto !important; grid-template-columns: 1fr !important; }
    #pl-score-curve, #pl-score-aim,
    #pl-rank-curve,  #pl-rank-aim  { font-size: 1.1rem !important; }
    /* brawlers: 2 per row */
    .pl-brawler-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── Profile Card modal ───────────────────────────────────────────────────── */
.pc-overlay{position:fixed;inset:0;z-index:9100;background:rgba(0,0,0,0.78);display:flex;align-items:center;justify-content:center;padding:1rem;}
.pc-modal{background:var(--card);border:1px solid rgba(255,255,255,0.10);border-radius:14px;width:min(960px,100%);max-height:92vh;overflow:hidden;display:grid;grid-template-columns:240px 1fr;}
.pc-editor-panel{padding:1rem;display:flex;flex-direction:column;gap:0.85rem;border-right:1px solid rgba(255,255,255,0.07);overflow-y:auto;max-height:92vh;}
.pc-preview-panel{background:repeating-conic-gradient(rgba(255,255,255,0.025) 0% 25%,transparent 0% 50%) 0 0/20px 20px;display:flex;align-items:center;justify-content:center;padding:1.25rem;overflow:hidden;}
.pc-canvas-wrap{line-height:0;}
.pc-canvas-wrap canvas{display:block;}
.pc-dropzone{border:2px dashed rgba(var(--primary-rgb),0.25);border-radius:8px;background:rgba(var(--primary-rgb),0.03);padding:1.1rem 1rem;text-align:center;cursor:pointer;transition:border-color .15s,background .15s;user-select:none;}
.pc-dropzone:hover,.pc-dropzone.pc-drag-over{border-color:rgba(var(--primary-rgb),0.55);background:rgba(var(--primary-rgb),.07);}
.pc-dropzone input{display:none;}
.pc-dz-icon{font-size:1.4rem;line-height:1;display:block;margin-bottom:0.3rem;}
.pc-dz-label{font-size:0.75rem;font-weight:700;color:var(--text);}
.pc-dz-hint{font-size:0.67rem;color:var(--text-dim);margin-top:0.2rem;}
.pc-row{display:flex;align-items:center;gap:0.55rem;flex-wrap:wrap;}
.pc-btn{padding:0.6rem 1rem;border-radius:8px;font-size:0.85rem;font-weight:800;cursor:pointer;border:none;transition:opacity .15s;outline:none;width:100%;letter-spacing:0.3px;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:0.4rem;}
.pc-btn:hover{opacity:.82;}
.pc-btn-primary{background:var(--primary);color:#000;}
.pc-btn-ghost{background:rgba(255,255,255,0.07);color:var(--text);border:1px solid rgba(255,255,255,0.10);}
.pc-lbl{font-size:0.65rem;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:var(--text-dim);margin-bottom:0.35rem;display:block;}
.pc-select{width:100%;background:var(--dark);border:1px solid rgba(var(--primary-rgb),0.25);border-radius:7px;color:var(--text);padding:0.42rem 0.7rem;font-size:0.82rem;font-weight:600;cursor:pointer;font-family:inherit;appearance:none;}
.pc-select:focus{outline:none;border-color:rgba(var(--primary-rgb),0.55);}
.pc-open-btn{background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.12);border-radius:7px;color:var(--text);font-size:0.78rem;font-weight:600;padding:0.38rem 0.8rem;cursor:pointer;transition:background .15s,border-color .15s;margin-top:0.3rem;width:100%;}
.pc-open-btn:hover{background:rgba(255,255,255,0.13);border-color:rgba(255,255,255,0.24);}

/* clickable club chip on the profile card — minimal: just a hairline border */
.pl-club-btn {
    display:inline-flex; align-items:center; gap:0.3rem;
    border:1px solid rgba(255,255,255,0.10);
    border-radius:6px;
    padding:0.15rem 0.45rem;
    margin-top:0.15rem;
    color:inherit; text-decoration:none;
    transition: border-color .15s;
}
.pl-club-btn:hover { border-color:rgba(255,255,255,0.22); }
.pl-club-btn img { width:18px; height:18px; object-fit:contain; opacity:0.9; flex-shrink:0; }
.pl-club-btn span { font-size:0.73rem; color:var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pc-open-btn-club{display:none;}
@media(max-width:680px){.pc-modal{grid-template-columns:1fr;}.pc-editor-panel{border-right:none;border-bottom:1px solid rgba(255,255,255,0.07);max-height:none;}.pc-preview-panel{padding:0.75rem;}}
.pl-modern-picture { display: contents; }

/* ── offseason scrim summary ─────────────────────────────────────────────── */
.pl-scrim-card {
    margin: 0 0 1rem; padding: 1rem 1.1rem; border: 1px solid rgba(var(--primary-rgb), .24);
    border-radius: 10px; background: linear-gradient(110deg, rgba(var(--primary-rgb), .08), var(--card) 55%);
}
.pl-scrim-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.pl-scrim-head h2 { margin:.1rem 0 0; font-size:1rem; }
.pl-scrim-head a, .pl-scrim-mode { color:var(--primary); text-decoration:none; }
.pl-scrim-head a { font-size:.72rem; font-weight:700; white-space:nowrap; }
.pl-scrim-summary { display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem; margin-top:.85rem; }
.pl-scrim-summary div { display:flex; flex-direction:column; gap:.12rem; padding:.55rem .65rem; border-radius:7px; background:rgba(255,255,255,.035); }
.pl-scrim-summary span, .pl-scrim-mode small { color:var(--text-dim); font-size:.62rem; }
.pl-scrim-summary strong { font-size:1rem; }
.pl-scrim-modes { display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem; margin-top:.5rem; }
.pl-scrim-mode { display:flex; flex-direction:column; gap:.08rem; min-width:0; padding:.55rem .65rem; border:1px solid rgba(255,255,255,.08); border-radius:7px; background:rgba(0,0,0,.1); }
.pl-scrim-mode:hover { border-color:rgba(var(--primary-rgb),.4); }
.pl-scrim-mode span { overflow:hidden; color:var(--text); font-size:.68rem; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
.pl-scrim-mode strong { font-size:1rem; }
@media(max-width:680px){
    .pl-scrim-summary { grid-template-columns:repeat(2,1fr); }
    .pl-scrim-modes { grid-template-columns:repeat(2,1fr); }
}