/* 84-0 · 1v1 Rankings + profile card — used by h2h/board.js (lab page now; profile/leaderboard at launch) */
.h2hb { max-width: 720px; margin: 0 auto; padding: 8px 14px 48px; color: var(--text, #eef4fb); font-family: "Inter", system-ui, sans-serif; --h2h-gold: #e0a93a; }
:root[data-theme="light"] .h2hb { --h2h-gold: #b07d1a; }
.h2hb-h { font-family: "Oswald", sans-serif; font-weight: 700; font-size: 22px; text-align: center; margin: 14px 0 4px; }
.h2hb-sub { text-align: center; color: var(--text-dim, #b9cbdd); font-size: 13px; margin-bottom: 14px; }
.h2hb-info { max-width: 520px; margin: 0 auto 16px; background: var(--surface, rgba(255,255,255,.05)); border: 1px solid var(--line, rgba(255,255,255,.12)); border-radius: 10px; font-size: 12.5px; }
.h2hb-info summary { cursor: pointer; padding: 9px 13px; color: var(--h2h-gold); font-weight: 700; list-style: none; }
.h2hb-info summary::-webkit-details-marker { display: none; }
.h2hb-info[open] summary { border-bottom: 1px solid var(--line, rgba(255,255,255,.12)); }
.h2hb-info p { margin: 0; padding: 9px 13px 11px; color: var(--text-dim, #b9cbdd); line-height: 1.5; }

.h2hb-tabs { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-bottom: 14px; }
.h2hb-tab { background: var(--surface, #122130); border: 1px solid var(--line, rgba(255,255,255,.12)); color: var(--text-dim, #b9cbdd);
  border-radius: 999px; padding: 7px 15px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.h2hb-tab.on { background: linear-gradient(135deg, #2a4bb5, #16224f); color: #fff; border-color: transparent; }
.h2hb-tab:hover:not(.on) { border-color: var(--h2h-gold); color: var(--text, #eef4fb); }

.h2hb-table { background: var(--surface, #122130); border: 1px solid var(--line, rgba(255,255,255,.12)); border-radius: 12px; overflow: hidden; }
.h2hb-row { display: grid; align-items: center; gap: 8px; padding: 10px 12px; font-size: 13.5px; }
.h2hb-row.overall { grid-template-columns: 32px 1fr 50px 50px 80px; }   /* #, Player, Elo, W-L, Streak (incl. sport) */
.h2hb-strk { white-space: nowrap; }
.h2hb-strksport { font-size: 11px; }
.h2hb-row.sport   { grid-template-columns: 34px 1fr 56px 70px 48px; }
.h2hb-row + .h2hb-row { border-top: 1px solid rgba(255,255,255,.06); }
.h2hb-row.head { color: var(--text-faint, #7f93a6); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; font-weight: 700; background: rgba(255,255,255,.02); }
.h2hb-row.me { background: rgba(224,169,58,.12); }
.h2hb-rk { color: var(--text-dim, #b9cbdd); font-weight: 700; }
.h2hb-rk.top { color: var(--h2h-gold); }
.h2hb-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.h2hb-rt { font-family: "Oswald", sans-serif; font-weight: 700; }
.h2hb-mut { color: var(--text-faint, #7f93a6); }
.h2hb-pos { color: #57c98a; } .h2hb-neg { color: #d86b6b; }
.h2hb-empty { text-align: center; color: var(--text-dim, #b9cbdd); padding: 28px 12px; font-size: 14px; }

/* your-1v1 card (the profile section) */
.h2hb-card { margin-top: 22px; background: var(--bg-2, #0b1622); border: 1px solid var(--line, rgba(255,255,255,.12)); border-radius: 14px; padding: 14px; }
.h2hb-card h3 { font-family: "Oswald", sans-serif; margin: 0 0 10px; font-size: 16px; }
.h2hb-big { display: flex; gap: 18px; align-items: baseline; flex-wrap: wrap; margin-bottom: 12px; }
.h2hb-big .v { font-family: "Oswald", sans-serif; font-weight: 700; font-size: 30px; color: var(--h2h-gold); }
.h2hb-big .k { color: var(--text-dim, #b9cbdd); font-size: 12px; }
.h2hb-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.h2hb-chip { background: var(--surface, #122130); border: 1px solid var(--line, rgba(255,255,255,.12)); border-radius: 10px; padding: 7px 11px; font-size: 12.5px; }
.h2hb-chip b { font-family: "Oswald", sans-serif; }
.h2hb-recent { margin-top: 6px; }
.h2hb-m { display: grid; grid-template-columns: 40px 1fr auto auto; gap: 8px; align-items: center; padding: 6px 2px; font-size: 12.5px; border-top: 1px solid rgba(255,255,255,.05); }
.h2hb-m .res { font-weight: 700; }
.h2hb-m .res.W { color: #57c98a; } .h2hb-m .res.L { color: #d86b6b; } .h2hb-m .res.D { color: var(--h2h-gold); }
.h2hb-m .sp { color: var(--text-faint, #7f93a6); font-size: 10px; text-transform: uppercase; font-weight: 700; }
.h2hb-signin { text-align: center; color: var(--text-dim, #b9cbdd); padding: 18px; font-size: 14px; }

/* Elo-over-time chart (profile) */
.h2hc { margin: 4px 0 14px; }
.h2hc-title { font-family: "Oswald", sans-serif; font-size: 12px; letter-spacing: .4px; color: var(--text-dim, #b9cbdd); margin-bottom: 6px; }
.h2hc-svg { display: block; width: 100%; height: auto; overflow: visible; }
.h2hc-grid { stroke: rgba(255,255,255,.08); stroke-width: 1; }
.h2hc-base { stroke: var(--text-faint, #7f93a6); stroke-width: 1; stroke-dasharray: 3 3; opacity: .55; }
.h2hc-yl { fill: var(--text-faint, #7f93a6); font-size: 8px; font-family: "Inter", sans-serif; text-anchor: end; }
.h2hc-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; font-size: 12px; color: var(--text-dim, #b9cbdd); }
.h2hc-leg { display: inline-flex; align-items: center; gap: 6px; }
.h2hc-leg b { color: var(--text, #eaf1f8); font-family: "Oswald", sans-serif; }
.h2hc-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }