/* ── HEAD-TO-HEAD ────────────────────────────────────────── */
.h2h-selector { margin-bottom:2rem; }
.h2h-vs { font-size:1.1rem; font-weight:700; color:var(--text-muted); text-align:center; }

/* custom dropdown */
.stats-player-filter .h2h-dd-btn { background:var(--bg-base); }
.h2h-dropdown { position:relative; width:100%; }
.h2h-dd-btn {
    width:100%; display:flex; align-items:baseline; gap:.5rem;
    background:var(--bg-surface); border:1px solid var(--border);
    color:var(--text-main); padding:.45rem .6rem; font-family:inherit;
    font-size:.82rem; text-transform:uppercase; cursor:pointer;
    text-align:left; overflow:hidden;
}
.h2h-dd-btn:hover               { border-color:var(--accent); }
.h2h-dropdown.open .h2h-dd-btn  { border-color:var(--accent); }
.h2h-dd-btn > span:first-child  { font-weight:700; flex-shrink:0; }
.h2h-dd-btn .h2h-opt-name       { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.72rem; }
.h2h-dd-chevron                 { flex-shrink:0; font-size:.75rem; color:var(--text-muted); transition:transform .15s; margin-left:auto; }
.h2h-dropdown.open .h2h-dd-chevron { transform:rotate(180deg); }
.h2h-dd-list {
    display:none; position:absolute; top:100%; left:0; right:0; z-index:100;
    background:var(--bg-surface); border:1px solid var(--accent);
    border-top:none; max-height:220px; overflow-y:auto;
}
.h2h-dropdown.open .h2h-dd-list { display:block; }

.h2h-opt              { display:flex; align-items:center; gap:.5rem; padding:.4rem .6rem; cursor:pointer; font-size:.82rem; text-transform:uppercase; }
.h2h-opt:hover        { background:var(--bg-hover); }
.h2h-opt--active      { background:rgba(88,166,255,.1); }
.h2h-opt > span:first-child { font-weight:700; flex-shrink:0; color:var(--text-main); }
.h2h-opt-name         { font-size:.72rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* scoreboard */
.h2h-scoreboard   { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1rem; text-align:center; }
.h2h-score-code   { font-size:1.5rem; font-weight:700; }
.h2h-score-num    { font-size:2.5rem; font-weight:700; line-height:1.1; margin-top:.25rem; }
.h2h-score-center { text-align:center; }
.h2h-score-draws  { font-size:.72rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.06em; margin-bottom:.5rem; }
.h2h-score-bar    { display:flex; height:4px; background:var(--border); overflow:hidden; gap:1px; }
.h2h-bar-a, .h2h-bar-b { height:100%; transition:width .3s; }

/* round table */
.h2h-round-row {
    display:grid;
    grid-template-columns:56px 52px 52px 1fr 52px;
    gap:.3rem; align-items:center;
    padding:.45rem .75rem;
    font-size:.82rem;
}
.h2h-round-hd { font-size:.72rem; color:var(--text-muted); text-transform:uppercase; border-bottom:1px solid var(--border); background:var(--bg-base); }
.h2h-round-row:not(.h2h-round-hd):not(:last-child) { border-bottom:1px solid rgba(255,255,255,.04); }
.h2h-rr-round   { display:flex; align-items:center; gap:.35rem; }
.h2h-rr-pts     { text-align:right; }
.h2h-rr-gap     { text-align:right; }
.h2h-rr-cum     { text-align:right; }
.h2h-rr-cum-gap { text-align:right; }
.h2h-row-win-a  { background:rgba(88,166,255,.06); }
.h2h-row-win-b  { background:rgba(227,179,65,.06); }
.h2h-row-draw   { background:rgba(255,255,255,.03); }

/* ── ZOOM CONTROLS ──────────────────────────────────────── */
.h2h-chart-header  { display:flex; justify-content:space-between; align-items:flex-start; gap:.5rem; }
.h2h-chart-title   { flex:1; min-width:0; line-height:1.5; }
.h2h-chart-sub     { font-size:.72rem; display:inline-block; margin-top:1px; }
.h2h-zoom-group    { display:flex; gap:2px; flex-shrink:0; margin-top:1px; }
.h2h-zoom-btn {
    background:var(--bg-surface); border:1px solid var(--border);
    color:var(--text-muted); font-family:inherit; font-size:.65rem;
    padding:.15rem .4rem; cursor:pointer; text-transform:uppercase;
    letter-spacing:.05em; transition:color .15s, border-color .15s;
}
.h2h-zoom-btn:hover            { border-color:var(--accent); color:var(--accent); }
.h2h-zoom-btn--active          { border-color:var(--accent); color:var(--accent); background:rgba(88,166,255,.1); }