/* ============================================================================
   Reusable components — replaces the scattered inline <style> blocks and
   style="" attributes that used to live in the templates. Loaded AFTER main.css
   so these win at equal specificity by source order (no !important needed except
   where overriding a higher-specificity table rule). Uses tokens.css variables.

   Migration pattern to replicate elsewhere: lift a template's inline styles into
   a named component class here, then reference the class in the template.
   ========================================================================== */

/* ===== stat-card info icon (partial_stats.html) =====
   Reuses the site-wide .tooltipO/.tooltiptext hover pattern (main.css), but
   overrides its default width:auto + static-flow position — anchored to
   the right of a narrow "Matches" label, the base rule let the tooltip
   wrap tall-and-thin and clip against the card edge. Pops centered above
   the icon instead (same pattern as .custom-tooltip elsewhere), which is
   robust regardless of how narrow the surrounding column is. */
/* A .tooltiptext is absolutely positioned, so ANY ancestor with a non-visible overflow
   cuts the bubble off the moment it leaves that ancestor's box. .stats_container wraps
   almost every section on the site and carries overflow:auto, so a section that hosts a
   tooltip has to opt out. This is the one way to do that — it lives in components.css so
   it is declared after main.css and wins. scratchpad/test_tooltips.py walks every
   template and fails if a tooltip ends up inside something that clips it. */
.tip-safe { overflow: visible; }

/* THE TWO HELP AFFORDANCES. Use these everywhere; do not invent a third.
   .fa-hint     — a "?" that explains on hover. Wrap it in .tooltipO and put the bubble
                  in a .tooltiptext.stats-info-tip beside it. Never clickable.
   .fa-icon-btn — a round button the user clicks. For an information button put
                  <i class="fa fa-info-circle"> inside it, and nothing else; the search
                  row reuses the same shape for its upload control.
   The lift on hint hover is so the bubble clears cards that make their own stacking
   context (anything with backdrop-filter). */
.fa-hint { display:inline-flex; margin-left:6px; font-size:.85em; vertical-align:middle;
           color:var(--c-faint); cursor:help; }
.fa-hint:hover, .fa-hint:focus-visible, .fa-hint:focus-within {
  outline:none; position:relative; z-index:40; color:var(--c-muted); }

.fa-icon-btn { width:28px; height:28px; padding:0; flex:none; border-radius:50%;
               display:inline-flex; align-items:center; justify-content:center;
               font-size:14px; line-height:1; cursor:pointer;
               border:1px solid var(--card-border); color:var(--c-muted);
               background:linear-gradient(180deg, rgba(38,49,67,.9), rgba(28,36,48,.92));
               transition:color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.fa-icon-btn:hover, .fa-icon-btn:focus-visible {
  outline:none; color:var(--c-ink); border-color:rgba(255,255,255,.28);
  transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.45); }
.fa-icon-btn:active { transform:translateY(0); box-shadow:none; }
/* matches the height of a 38px input row */
.fa-icon-btn--lg { width:38px; height:38px; font-size:17px; }
.tooltipO .tooltiptext.stats-info-tip {
	position:absolute; bottom:100%; left:50%; transform:translateX(-50%); margin-bottom:8px;
	width:260px; max-width:80vw; font-size:12px; line-height:1.4; font-weight:400;
	white-space:normal; text-align:left;
	/* solid + isolated compositing layer — the site-wide rgba(1,1,1,.9) read as
	   too transparent here, and the winrate donut chart sits in the same
	   .stat-card (which has backdrop-filter:blur) directly above this tooltip's
	   pop-up position, so force our own paint layer to guarantee opacity. */
	background-color:#0b0f14 !important;
	opacity:1 !important;
	isolation:isolate;
	z-index:9999;
}

/* Opens downward instead — for triggers near the top of the page, where there is no
   room above. Same box, flipped anchor. */
.tooltipO .tooltiptext.stats-info-tip--below {
	top:100%; bottom:auto; margin-top:8px; margin-bottom:0;
}

/* ===== scan / cheater UI  (/teammates + /matches?cheater_check) ===== */

/* horizontal row of chips + button */
.scan-bar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* coverage count chips */
.scan-chip { display:inline-flex; align-items:center; gap:6px; padding:3px 11px;
  border-radius:var(--r-pill); font-size:.76rem; font-weight:700; border:1px solid transparent; }
.scan-chip--flag  { color:var(--c-danger-text); background:rgba(255,91,91,.12);  border-color:rgba(255,91,91,.30); }
.scan-chip--clean { color:var(--c-ok-text);     background:rgba(57,217,138,.12); border-color:rgba(57,217,138,.30); }
.scan-chip--miss  { color:var(--c-muted);       background:var(--surface);       border-color:var(--surface-line); }

/* "Scan more" button (shared by both pages) + its loading spinner */
.scan-more { display:inline-flex; align-items:center; gap:5px; padding:4px 13px;
  border-radius:var(--r-pill); font-size:.8rem; font-weight:700; color:var(--c-subtle);
  background:var(--surface); border:1px solid var(--surface-line); text-decoration:none;
  cursor:pointer; transition:all .15s ease; }
.scan-more:hover { background:rgba(255,255,255,.10); color:#fff; }
.scan-more.htmx-request { pointer-events:none; opacity:.9; }
.scan-more__spin { display:none; width:12px; height:12px; border:2px solid currentColor;
  border-top-color:transparent; border-radius:50%; animation:scan-spin .6s linear infinite; }
.scan-more.htmx-request .scan-more__icon { display:none; }
.scan-more.htmx-request .scan-more__spin { display:inline-block; }
@keyframes scan-spin { to { transform:rotate(360deg); } }

/* muted "Scan complete" note */
.scan-note { color:var(--c-faint); font-size:.76rem; cursor:help; }

/* cheater-check toggle button (/matches) */
.cheat-toggle { display:inline-flex; align-items:center; gap:7px; padding:6px 13px;
  border-radius:var(--r-pill); border:1px solid rgba(255,91,91,.35); background:rgba(255,91,91,.08);
  color:var(--c-danger-text); font-weight:800; font-size:.82rem; letter-spacing:.2px;
  text-decoration:none; cursor:pointer; transition:all .15s ease; }
.cheat-toggle:hover { background:rgba(255,91,91,.16); color:#ffb3b3; }
.cheat-toggle.is-on { background:var(--c-danger); border-color:var(--c-danger); color:#fff;
  box-shadow:0 4px 14px rgba(255,91,91,.35); }
.cheat-toggle.htmx-request { pointer-events:none; opacity:.9; }
.cheat-toggle__flag { font-weight:900; }
.cheat-toggle__spin { display:none; width:12px; height:12px; border:2px solid currentColor;
  border-top-color:transparent; border-radius:50%; animation:scan-spin .6s linear infinite; }
.cheat-toggle.htmx-request .cheat-toggle__flag { display:none; }
.cheat-toggle.htmx-request .cheat-toggle__spin { display:inline-block; }

/* per-row scan state in the match-history table (!important overrides the
   table's own higher-specificity td background) */
.maps_table .maps_tr.is-cheater td       { background:rgba(255,91,91,.12) !important; }
.maps_table .maps_tr.is-cheater:hover td  { background:rgba(255,91,91,.20) !important; }
.maps_table .maps_tr.is-cheater td.col-match { box-shadow:inset 4px 0 0 var(--c-danger); }
.maps_table .maps_tr.is-unscanned td      { opacity:.5; }
.maps_table .maps_tr.is-unscanned:hover td { opacity:.85; }
/* play sessions: the stripe alternates each time the sitting changes, so a run of
   rows reads as one session. The cheater flag owns the same edge, so it wins.
   Amber against sky, a step deeper and softer than the pure 400-weights so they
   group rows without pulling the eye off the table. 4px matches the flag. */
.maps_table .maps_tr.is-session-a:not(.is-cheater) td.col-match { box-shadow:inset 4px 0 0 rgba(234,179,8,.78); }
.maps_table .maps_tr.is-session-b:not(.is-cheater) td.col-match { box-shadow:inset 4px 0 0 rgba(14,165,233,.78); }
.scan-mark        { margin-left:5px; cursor:help; }
.scan-mark--flag  { color:var(--c-danger); font-weight:900; }
.scan-mark--clean { color:var(--c-ok); }
.scan-mark--miss  { color:var(--c-faint); }

/* match analyser: cheater flag on a player card */
.player.is-cheater { outline:2px solid rgba(255,91,91,.65); outline-offset:-2px;
  background:rgba(255,91,91,.08); border-radius:8px; }
.cheater-pill { background:rgba(255,91,91,.18); color:var(--c-danger-text);
  border:1px solid rgba(255,91,91,.5); font-weight:800; }

/* ===== segmented toggle  (Overall/Last50, Teammates/Enemies, Best/Worst) =====
   One glassy pill toggle shared by every page. Previously duplicated as four
   identical <style> blocks (.tv-* ×3 + .te-* in teammates). Container layout
   varies per use, so those bits are modifier classes; the pill itself is shared.
   .segment-controls-filters/-toggles .tv-shell overrides in main.css still win
   by higher specificity when the toggle is embedded in the segment controls. */
.tv-shell { display:flex; align-items:center; }
.tv-shell--center     { max-width:1200px;box-sizing:border-box; margin:0 auto; justify-content:flex-end;   padding:0 12px; }
.tv-shell--full-end   { width:100%; justify-content:flex-end; }
.tv-shell--full-start { width:100%; justify-content:flex-start; }
.tv-row  { display:flex; align-items:center; gap:12px; }
.tv-row--spread { justify-content:space-between; width:100%; }
/* chips share the toggle's row: they take the slack on the left, the segmented
   buttons stay pinned right. Compound selector so it beats .tv-shell--center's
   flex-end regardless of source order. */
.tv-shell--center.tv-shell--spread { justify-content:space-between; gap:14px; }
#tv-inline-slot { display:none; }
.tv-seg { display:flex; background:var(--surface); border:1px solid rgba(255,255,255,.06);
  padding:4px; border-radius:var(--r-pill); box-shadow:0 6px 18px rgba(0,0,0,.35); }
.tv-opt { appearance:none; background:transparent; border:0; color:var(--c-subtle);
  font-weight:800; padding:6px 12px; border-radius:var(--r-pill); cursor:pointer;
  font-size:.88rem; letter-spacing:.25px; transition:all .2s ease; }
.tv-opt:hover  { background:rgba(255,255,255,.08); color:var(--c-ink); }
.tv-opt.active { background:rgba(255,255,255,.92); color:#0b0f14;
  box-shadow:0 4px 14px rgba(0,0,0,.35), inset 0 -1px 0 rgba(0,0,0,.08); }
@media (max-width:780px) {
  .tv-shell { justify-content:center; }
  .tv-opt   { padding:6px 10px; font-size:.84rem; }
}

/* ===== generic utilities (small, repeated values not worth a one-off class) ===== */
.pad-20 { padding:20px; }
.w-100  { width:100%; }
.flex-row { display:flex; align-items:center; gap:10px; }
.ta-c { text-align:center; }
.ta-l { text-align:left; }
.link-white { color:#fff; text-decoration:none; }
.link-white:hover { text-decoration:underline; }
.link-white--block { color:#fff; display:inline-block; text-decoration:none; }
.link-white--block:hover { text-decoration:underline; }

/* ===== small sizing/layout utilities (demo.html legacy stats table, etc.) =====
   Column-width and spacing values that repeat identically many times across
   a table's <th>/<td> cells — not decorative duplication, genuinely the same
   value reused, so a utility class is the right call per the CSS cleanup policy. */
.w-16 { width:16px; }
.w-20 { width:20px; }
.w-22 { width:22px; }
.w-26 { width:26px; }
.h-26 { height:26px; }
.w-40 { width:40px; }
.w-50 { width:50px; }
.w-54 { width:54px; }
.w-60 { width:60px; }
.w-65 { width:65px; }
.w-70 { width:70px; }
.w-225 { width:225px; }
.w-half { width:50%; }
.h-25 { height:25px; }
.h-40 { height:40px; }
.h-70 { height:70px; }
.icon-25 { height:25px; width:25px; }
.d-none { display:none; }
.d-flex { display:flex; }
.float-r { float:right; }
.bg-none { background:transparent; }
.pl-10 { padding-left:10px; }
.pl-20 { padding-left:20px; }
.mt-50 { margin-top:50px; }
.fs-6 { font-size:6px; }
.fs-15 { font-size:15px; }
.fs-30 { font-size:30px; }
.table-fixed { table-layout:fixed; }
.stat-badge-r { float:right; font-size:30px; font-weight:700; line-height:10px; }
.c-orange { color:orange; }
.c-chocolate { color:chocolate; }
.c-blue { color:#2196F3; }
.fw-bold { font-weight:bold; }
.w-80 { width:80px; }
.w-90 { width:90px; }
.w-100px { width:100px; }
.w-325 { width:325px; }
.pad-0 { padding:0; }
.pb-0 { padding-bottom:0; }
.mr-15 { margin-right:15px; }
.row-between { display:flex; justify-content:space-between; align-items:center; }
.w-30 { width:30px; }
.pad-5 { padding:5px; }

/* ===== home.html ===== */
.pip { border-radius:2px; padding:2px; border:1px solid transparent; }
.pip-red { border-color:red; }
.pip-green { border-color:green; }
.hm-cell-r { width:40%; text-align:right; padding:2px; }
.hm-cell-l { width:40%; text-align:left; padding:2px; }
.hm-icon-30 { width:30px; margin:10px; border-radius:10px; }
.hm-w20-c { width:20%; text-align:center; }
.hm-center-mt30 { margin:auto; margin-top:30px; text-align:center; }
.hm-flex-wrap-60 { display:flex; justify-content:center; flex-wrap:wrap; width:60%; padding:20px; margin:auto; }
.hm-panel { background:rgba(0,0,0,.175); padding:15px; border-radius:5px; }
.br-circle { border-radius:50%; }
.hub-cell-pad { text-align:left; padding-left:12px; overflow:hidden; }
.nowrap { white-space:nowrap; }

/* ===== coachbug.html (standalone legacy page, own <head>) ===== */
.pad-8-0 { padding:8px 0px; }
.cb-panel { text-align:left; font-size:0.8vw; overflow:auto; height:36vw; }
.cb-panel-wrap { width:38vw; margin-right:15px; }

/* ===== account overview cards (account.html) =====
   Relocated verbatim from that partial's own <style> block. */
/* ── Layout ──────────────────────────────────────────────────────── */
.ao-wrap { margin: 18px 0 10px; }

.ao-grid {
    display: flex;
    gap: 12px;
    align-items: stretch;
}

/* ── Card base ───────────────────────────────────────────────────── */
.ao-card {
    flex: 1;
    min-width: 0;
    background: linear-gradient(180deg, rgba(15,17,22,.68), rgba(12,14,18,.56));
    border: 1px solid rgba(255,255,255,.07);
    border-top: 2px solid rgba(255,255,255,.1);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(0,0,0,.55);
    backdrop-filter: blur(8px);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
}
.ao-card.faceit { border-top-color: rgba(255,85,0,.45); }
.ao-card.steam  { border-top-color: rgba(102,192,244,.35); }
.ao-card.trust  { border-top-color: rgba(182,245,142,.35); }

/* ── Card header ─────────────────────────────────────────────────── */
.ao-card-header {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: rgba(235,240,244,.4);
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.ao-card-header img, .ao-icon-svg {
    width: 14px;
    height: 14px;
    opacity: .75;
    flex-shrink: 0;
}
.ao-card-title { color: rgba(235,240,244,.55); }
.ao-card-pip {
    margin-left: auto;
    font-size: 9px;
    font-weight: 600;
    color: rgba(235,240,244,.3);
    background: rgba(255,255,255,.05);
    border-radius: 4px;
    padding: 2px 6px;
    letter-spacing: .3px;
    text-transform: none;
}

/* ── Card body / footer ──────────────────────────────────────────── */
.ao-card-body { flex: 1; }

.ao-sep {
    border: none;
    border-top: 1px solid rgba(255,255,255,.06);
    margin: 10px 0 0;
}
.ao-card-footer {
    min-height: 50px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* ── Rows ────────────────────────────────────────────────────────── */
.ao-rows { margin-top: 10px; }
.ao-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 7px;
}
.ao-row:last-child { margin-bottom: 0; }
.ao-label {
    font-size: 11px;
    color: rgba(235,240,244,.45);
    font-weight: 500;
}
.ao-val {
    font-size: 12px;
    font-weight: 700;
    color: #eaf0f4;
}

/* ── Badges ──────────────────────────────────────────────────────── */
.ao-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 4px;
    white-space: nowrap;
}
.ao-badge--sm { font-size: 11px; padding: 2px 7px; }
.b-green  { background: rgba(34,197,94,.14);   color: #4ade80; }
.b-yellow { background: rgba(245,158,11,.14);  color: #facc15; }
.b-red    { background: rgba(239,68,68,.14);   color: #f87171; }
.b-blue   { background: rgba(99,160,246,.14);  color: #93c5fd; }
.b-orange { background: rgba(251,146,60,.14);  color: #fb923c; }
.b-muted  { background: rgba(255,255,255,.06); color: rgba(235,240,244,.7); }

/* ── FACEIT hero ─────────────────────────────────────────────────── */
.ao-faceit-hero {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 0 6px;
}
.ao-faceit-shield { height: 52px; flex-shrink: 0; }
.ao-faceit-elo { display: flex; flex-direction: column; gap: 2px; }
.ao-faceit-elo .num {
    font-size: 28px;
    font-weight: 800;
    color: #b6f58e;
    line-height: 1;
}
.ao-faceit-elo .lbl { font-size: 11px; color: rgba(235,240,244,.4); font-weight: 500; }
.ao-faceit-elo .meta {
    font-size: 10px;
    color: rgba(235,240,244,.3);
    display: flex;
    align-items: center;
    gap: 5px;
}
.ao-membership { display: flex; gap: 4px; flex-wrap: wrap; }

/* ── Steam hero ──────────────────────────────────────────────────── */
.ao-steam-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 4px 0 10px;
    border-bottom: 1px solid rgba(255,255,255,.05);
}
.ao-steam-hero .num {
    font-size: 30px;
    font-weight: 800;
    color: #66c0f4;
    line-height: 1;
}
.ao-steam-hero .unit {
    font-size: 16px;
    font-weight: 700;
    color: rgba(102,192,244,.6);
    margin-left: 2px;
}
.ao-steam-hero .lbl { font-size: 11px; color: rgba(235,240,244,.35); margin-top: 3px; }
.ao-steam-hero-right { text-align: right; }
.ao-steam-recent .num2 { font-size: 16px; font-weight: 700; color: rgba(102,192,244,.75); }
.lbl2 { font-size: 10px; color: rgba(235,240,244,.3); margin-top: 2px; }

/* ── Steam meta + tiles ──────────────────────────────────────────── */
.ao-steam-meta { display: flex; gap: 5px; flex-wrap: wrap; padding: 8px 0 10px; }

.ao-tiles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}
.ao-tile {
    background: rgba(255,255,255,.04);
    border-radius: 8px;
    padding: 7px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ao-tile .num { font-size: 15px; font-weight: 800; color: #eaf0f4; line-height: 1; }
.ao-tile .lbl { font-size: 10px; color: rgba(235,240,244,.35); font-weight: 500; }

/* ── Ban row (footer) ────────────────────────────────────────────── */
.ao-ban-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0 0;
}
.ao-ban-chips { display: flex; gap: 4px; flex-wrap: wrap; }

/* ── Trust ring ──────────────────────────────────────────────────── */
.ao-trust-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 0 12px;
    gap: 10px;
}
.ao-ring { position: relative; width: 120px; height: 120px; }
.ao-ring svg { width: 120px; height: 120px; transform: rotate(-90deg); overflow: visible; }
.ao-ring-arc-bg { fill: none; stroke: rgba(255,255,255,.07); stroke-width: 9; }
.ao-ring-arc    { fill: none; stroke-width: 9; stroke-linecap: round; }
.ao-ring-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.ao-ring-score { font-size: 26px; font-weight: 800; color: #eaf0f4; line-height: 1; }
.ao-ring-of    { font-size: 11px; color: rgba(235,240,244,.35); font-weight: 500; }
.ao-trust-rating { font-size: 16px; font-weight: 800; letter-spacing: .02em; }

.tone-green  { color: #4ade80; }
.tone-yellow { color: #facc15; }
.tone-orange { color: #fb923c; }
.tone-red    { color: #f87171; }

/* ── Trust bars ──────────────────────────────────────────────────── */
.ao-trust-bars { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }

.ao-trust-bar-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}
.ao-trust-bar-label {
    font-size: 10px;
    color: rgba(235,240,244,.4);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.ao-trust-bar-label img { width: 12px; height: 12px; opacity: .6; }
.ao-trust-bar-val { font-size: 12px; font-weight: 700; color: #eaf0f4; }
.ao-trust-bar-track {
    height: 5px;
    background: rgba(255,255,255,.07);
    border-radius: 3px;
    overflow: hidden;
}
.ao-trust-bar-fill {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, #b6f58e, #57cbde);
    transition: width .8s cubic-bezier(.4,0,.2,1);
    width: 0%;
}

/* ── Banned friends toggle ───────────────────────────────────────── */
.ao-ban-toggle {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 4px;
    color: rgba(235,240,244,.5);
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    cursor: pointer;
    letter-spacing: .3px;
    transition: background .15s, color .15s;
    flex-shrink: 0;
}
.ao-ban-toggle:hover { background: rgba(255,255,255,.1); color: rgba(235,240,244,.8); }

/* ── Banned friends modal ────────────────────────────────────────── */
.ao-bm-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    backdrop-filter: blur(4px);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
}
.ao-bm-backdrop.open {
    opacity: 1;
    pointer-events: all;
}
.ao-bm-panel {
    background: linear-gradient(180deg, rgba(18,21,27,.97), rgba(13,15,20,.97));
    border: 1px solid rgba(255,255,255,.1);
    border-top: 2px solid rgba(239,68,68,.4);
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0,0,0,.7);
    width: min(420px, 92vw);
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    transform: translateY(10px);
    transition: transform .2s;
}
.ao-bm-backdrop.open .ao-bm-panel { transform: translateY(0); }

.ao-bm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 12px;
    border-bottom: 1px solid rgba(255,255,255,.07);
    flex-shrink: 0;
}
.ao-bm-title {
    font-size: 12px;
    font-weight: 700;
    color: rgba(235,240,244,.7);
    text-transform: uppercase;
    letter-spacing: .7px;
}
.ao-bm-close {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 6px;
    color: rgba(235,240,244,.45);
    font-size: 14px;
    line-height: 1;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.ao-bm-close:hover { background: rgba(255,255,255,.12); color: rgba(235,240,244,.9); }

.ao-bm-list {
    overflow-y: auto;
    padding: 10px 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ao-bm-list::-webkit-scrollbar { width: 4px; }
.ao-bm-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 2px; }

.ao-ban-entry {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 8px;
    background: rgba(255,255,255,.03);
    border-radius: 7px;
    border: 1px solid rgba(255,255,255,.05);
}
.ao-ban-entry-id {
    font-size: 11px;
    font-weight: 600;
    color: rgba(102,192,244,.7);
    text-decoration: none;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    white-space: nowrap;
}
.ao-ban-entry-id:hover { color: #66c0f4; text-decoration: underline; }

.ao-empty-title { font-size:12px; font-weight:600; color:rgba(235,240,244,.45); }
.ao-empty-sub { font-size:10px; color:rgba(235,240,244,.25); margin-top:4px; }

/* ===== navbar (partial_navbar.html) =====
   display:none baselines are toggled via el.style.display directly by JS
   (tbSearchClear/tbSearchInfoToggle/tbMoreToggle/tbToolsReflow), so folding
   the initial state into a class is safe — those calls always win. */
.tb-mobile-link { color:#ff884d; }

/* ===== matches.html ===== */
.stc-toggles { display:flex; align-items:center; justify-content:flex-end; padding-right:12px; }
.stc-toggles--gap { gap:12px; }

/* ===== page head — the site-wide title component (h1 + .accent span + sub line);
   pages headed by an overview card (player/clan profiles) don't use it. */
.page-head { margin-bottom: 16px; }
/* h2 variant is for pages already headed by an overview card, which owns the page's single h1 */
.page-head h1, .page-head h2 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: .2px; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.85), 0 1px 2px rgba(0,0,0,.9); }
.page-head h1 .accent, .page-head h2 .accent { color: #f59433; }
.page-head-sub { color: #d3dde4; font-size: 13px; margin-top: 6px; max-width: 580px; text-shadow: 0 1px 6px rgba(0,0,0,.9); }
.page-head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.page-head-actions { display: flex; align-items: center; gap: 16px; }
/* --page: column for search-led tool pages — mirrors .ps-wrap so the title shares the search card's left edge */
.page-head--page { max-width: 750px; margin: 20px auto 16px; padding: 0 10px; }
.page-head--m0 { margin-bottom: 0; }
@media (max-width: 600px) { .page-head h1, .page-head h2 { font-size: 22px; } }
.vs-val--muted { color:rgba(235,240,244,.38); }

/* ===== player overview card (overview.html) =====
   Relocated verbatim from that partial's own <style> block. This is the
   canonical .ov-game/.ov-games definition — compare.html and
   partial_segment_table.html previously carried their own local copy/scoped
   overrides because this wasn't global; compare.html's copy has been removed
   now that this is the single source. */
.ov-wrap{width:46vw;max-width:1025px;margin:26px auto 24px;}
.ov-card{position:relative;z-index:2;overflow:visible;display:flex;align-items:center;gap:18px;padding:18px 20px;border-radius:12px;background:linear-gradient(180deg, rgba(15,17,22,.62), rgba(12,14,18,.52));border:1px solid rgba(255,255,255,.08);box-shadow:0 12px 30px rgba(0,0,0,.5);backdrop-filter:blur(6px);width:100%;box-sizing:border-box;}
.ov-left{flex:0 0 120px}
.ov-mid{flex:1 1 auto;min-width:0}
.ov-right{flex:0 0 auto;display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.ov-avatar{width:110px;height:110px;border-radius:12px;object-fit:cover;box-shadow:0 8px 20px rgba(0,0,0,.6);border:2px solid rgba(255,255,255,.06);cursor:pointer}
.ov-avatar-wrap{display:flex;flex-direction:column;align-items:center;gap:8px}
.ov-indicators{position:static;display:flex;flex-direction:row;gap:8px;margin-top:6px}
.ov-indicators img{width:26px;height:26px;border-radius:6px;border:2px solid rgba(0,0,0,.12);background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(0,0,0,.04))}
.ov-name-indicators{display:inline-flex;align-items:center;gap:6px;margin-left:10px}
.ov-name-indicators img{width:20px;height:20px;border-radius:4px;border:1px solid rgba(0,0,0,.12)}
.ov-name-row{display:flex;align-items:center;gap:12px}
.ov-name{font-size:1.8rem;font-weight:800;color:#fff;letter-spacing:.2px;margin:0;line-height:1.2}
.ov-elo-row{display:flex;align-items:center;gap:12px;margin-top:10px;color:#e7edf2;font-weight:700}
.ov-elo{display:flex;align-items:baseline;gap:6px}
.ov-elo-value{color:#b6f58e;font-size:1.9rem;font-weight:900;letter-spacing:.3px}
.ov-flag{height:20px}
.ov-level{height:35px}
.ov-badges{display:flex;gap:10px;margin-top:8px}
.ov-ban{position:relative;color:#ff6b6b;font-size:1rem;margin-left:8px;cursor:help;outline:none}
.ov-ban-pop{position:absolute;top:calc(100% + 8px);left:0;z-index:1000;display:flex;flex-direction:column;gap:4px;min-width:160px;padding:8px 12px;background:rgba(0,0,0,.95);color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,.4);font-size:12px;font-weight:500;white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease}
.ov-ban:hover .ov-ban-pop,.ov-ban:focus .ov-ban-pop{opacity:1;visibility:visible}
.ov-ban-pop-title{font-weight:700;color:#ff6b6b;margin-bottom:2px}
.ov-ban-pop-row{display:flex;justify-content:space-between;gap:16px;color:rgba(235,240,244,.7)}
.ov-ban-pop-row b{color:#fff}
.ov-socials,.ov-games{display:flex;align-items:center;gap:10px;justify-content:flex-end}
.ov-socials{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.06);padding:6px 8px;border-radius:999px}
.ov-socials img{width:28px;height:28px;border-radius:50%;box-shadow:0 1px 6px rgba(0,0,0,.4)}
/* Bottom-right pill switcher */
.ov-games{gap:0;justify-content:flex-end;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.06);padding:4px;border-radius:999px;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.ov-game{appearance:none;background:transparent;border:0;text-decoration:none;display:inline-block;color:#cfd6de;font-weight:800;padding:6px 12px;border-radius:999px;cursor:pointer;font-size:.88rem;letter-spacing:.25px;transition:all .2s ease}
.ov-game:hover{background:rgba(255,255,255,.08);color:#eaf0f6}
.ov-game.active{background:rgba(255,255,255,.92);color:#0b0f14;box-shadow:0 4px 14px rgba(0,0,0,.35), inset 0 -1px 0 rgba(0,0,0,.08)}
.ov-hwm-pill{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.06);padding:6px 12px;border-radius:999px;box-shadow:0 6px 18px rgba(0,0,0,.35);color:#ff5500;font-weight:800;font-size:.85rem;text-decoration:none;letter-spacing:.25px;transition:all .2s ease;white-space:nowrap}
.ov-hwm-pill:hover{background:rgba(255,85,0,.15);color:#ff7733;transform:translateY(-1px);box-shadow:0 6px 18px rgba(255,85,0,.15)}
@media (max-width:1024px){.ov-wrap{max-width:920px}.ov-name{font-size:1.5rem}.ov-left{flex-basis:96px}.ov-avatar{width:96px;height:96px}}
@media (max-width:780px){.ov-wrap{width:92%;max-width:92%}.ov-card{padding:10px 12px;gap:12px}.ov-name{font-size:1.3rem}.ov-right{gap:6px}}
@media (max-width:540px){
  .ov-wrap{width:96%;max-width:96%;margin:10px auto 0}
  .ov-card{flex-wrap:wrap;padding:10px 10px 8px;gap:8px;align-items:flex-start}
  .ov-left{flex:0 0 60px}
  .ov-avatar{width:60px;height:60px;border-radius:8px}
  .ov-mid{flex:1 1 0;min-width:0}
  .ov-right{flex:0 0 100%;flex-direction:row;justify-content:space-between;align-items:center;gap:6px;border-top:1px solid rgba(255,255,255,.06);padding-top:7px;margin-top:2px}
  .ov-name{font-size:1rem}
  .ov-elo-value{font-size:1.3rem}
  .ov-level{height:22px}
  .ov-elo-row{margin-top:5px;gap:7px}
  .ov-flag{height:14px}
  .ov-name-indicators img{width:16px;height:16px}
  .ov-socials{padding:4px 6px;gap:6px}
  .ov-socials img{width:22px;height:22px}
  .ov-game{padding:4px 9px;font-size:.78rem}
  .ov-hwm-pill{padding:4px 9px;font-size:.78rem}
  .ov-ban{font-size:.85rem}
}
.profile-tab.tab-disabled { opacity: 0.3; pointer-events: none; cursor: not-allowed; }
.profile-tab.tab-disabled:hover { background: none; color: rgba(255,255,255,0.5); }
.profile-tab-svg { width:16px; height:16px; flex-shrink:0; }
.obj-cover { object-fit:cover; }

/* ===== Player-details modal (pdm-*) — opened by clicking the overview avatar ===== */
.pdm-overlay{display:none;position:fixed;inset:0;z-index:10500;background:rgba(5,7,10,.65);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);align-items:center;justify-content:center;padding:20px;box-sizing:border-box}
.pdm-overlay.open{display:flex;animation:pdm-fade .18s ease}
.pdm-panel{width:100%;max-width:440px;max-height:calc(100vh - 40px);overflow-y:auto;background:linear-gradient(180deg,rgba(21,24,31,.97),rgba(12,14,18,.97));border:1px solid rgba(255,255,255,.1);border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.65);color:var(--c-ink);animation:pdm-pop .22s cubic-bezier(.2,.9,.3,1.1)}
@keyframes pdm-fade{from{opacity:0}to{opacity:1}}
@keyframes pdm-pop{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
.pdm-head{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.08)}
.pdm-avatar{width:44px;height:44px;border-radius:10px;object-fit:cover;border:1px solid rgba(255,255,255,.1)}
.pdm-title{flex:1 1 auto;min-width:0}
.pdm-name{margin:0;font-size:1.1rem;font-weight:800;color:#fff;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pdm-sub{display:block;font-size:.68rem;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--c-muted)}
.pdm-close{flex:0 0 auto;appearance:none;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.05);color:var(--c-subtle);width:30px;height:30px;border-radius:50%;font-size:17px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s ease}
.pdm-close:hover{background:rgba(255,255,255,.12);color:#fff}
.pdm-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:14px}
.pdm-status{display:flex;flex-direction:column;gap:8px}
.pdm-ban{background:rgba(255,91,91,.08);border:1px solid rgba(255,91,91,.28);border-radius:10px;padding:10px 12px}
.pdm-ban-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pdm-ban-reason{color:var(--c-danger-text);font-weight:700}
.pdm-ban-dates{margin-top:4px;font-size:.78rem;color:var(--c-faint)}
.pdm-chip{font-size:.66rem;font-weight:800;letter-spacing:.6px;text-transform:uppercase;padding:2px 9px;border-radius:var(--r-pill);white-space:nowrap}
.pdm-chip-active{background:rgba(255,91,91,.18);border:1px solid rgba(255,91,91,.35);color:#ff9c9c}
.pdm-chip-expired{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:var(--c-muted)}
.pdm-clean{display:flex;align-items:center;gap:10px;background:rgba(57,217,138,.07);border:1px solid rgba(57,217,138,.25);border-radius:10px;padding:10px 12px;color:var(--c-ok-text);font-weight:700}
.pdm-clean svg{width:18px;height:18px;flex:0 0 auto;color:var(--c-ok)}
.pdm-rows{border:1px solid rgba(255,255,255,.07);border-radius:10px;background:rgba(255,255,255,.03);overflow:hidden}
.pdm-row{display:flex;align-items:center;gap:10px;padding:9px 12px;min-width:0}
.pdm-row + .pdm-row{border-top:1px solid rgba(255,255,255,.06)}
.pdm-label{flex:0 0 108px;font-size:.72rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--c-muted)}
.pdm-value{flex:1 1 auto;min-width:0;font-size:.85rem;color:var(--c-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pdm-mono{font-family:'Consolas',monospace;font-size:.8rem}
.pdm-copy{flex:0 0 auto;appearance:none;border:0;background:transparent;color:var(--c-faint);width:26px;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s ease}
.pdm-copy:hover{background:rgba(255,255,255,.08);color:#fff}
.pdm-copy svg{width:14px;height:14px}
.pdm-copy .pdm-ic-check{display:none}
.pdm-copy.copied{color:var(--c-ok)}
.pdm-copy.copied .pdm-ic-copy{display:none}
.pdm-copy.copied .pdm-ic-check{display:block}
.pdm-pills{display:flex;flex-wrap:wrap;gap:6px;white-space:normal;overflow:visible}
.pdm-pill{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:var(--c-subtle);font-size:.68rem;font-weight:800;letter-spacing:.5px;text-transform:uppercase;padding:2px 9px;border-radius:var(--r-pill)}
.pdm-section-title{margin:0 0 8px;font-size:.72rem;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--c-muted)}
.pdm-games{display:flex;flex-direction:column;gap:6px}
.pdm-game-row{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:10px;padding:8px 12px}
.pdm-game-lvl{width:26px;height:26px;flex:0 0 auto}
.pdm-game-name{flex:1 1 auto;min-width:0;font-size:.85rem;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pdm-game-elo{font-family:'Consolas',monospace;font-weight:700;font-size:.95rem;color:var(--good)}
.pdm-game-elo small{margin-left:5px;font-size:.65rem;font-weight:800;letter-spacing:.5px;color:var(--c-muted);font-family:"Montserrat",sans-serif}
.pdm-empty{color:var(--c-muted);font-size:.85rem;margin:0}
@media (max-width:540px){
  .pdm-overlay{padding:12px}
  .pdm-label{flex-basis:88px}
}

/* ===== stats.html (graphs + percentile bar page) =====
   Relocated verbatim from that partial's own <style> block. .pb-fill has no
   width here in the original rule (relies on the div starting from whatever
   the browser default is) — but its only two uses (#bar in
   partial_percentile.html) rely on an inline style="width:0%" starting point
   that JS (updateLvlBar in this file) then animates via el.style.width, which
   always wins. That inline width:0 was already folded into a shared default
   here when partial_percentile.html was migrated — kept as width:0 below so
   the animate-in behavior survives. */
.resized_levels_container .onlyBigScreen{font-size:12px;white-space:nowrap;line-height:1.1}
.pb-flex{display:flex}
.pb-track{height:6px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.06);border-radius:999px;position:relative;overflow:hidden}
.pb-fill{width:0;height:100%;background:linear-gradient(90deg,#ff9d57,#d87a30);border-radius:999px;box-shadow:0 1px 6px rgba(0,0,0,.35), inset 0 -1px 0 rgba(0,0,0,.12);transition:width .6s ease}
.resized_icons{width:32px;height:32px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.45))}
.level_divider{border-right:1px solid rgba(255,255,255,.08);text-align:center}
@media(max-width:600px){.resized_icons{width:12px;height:12px}}
@media(max-width:780px){.pcard{margin:16px auto;padding:12px}}
/* Graph controls + chart containers in glass theme */
.gg-shell{max-width:1200px;box-sizing:border-box;margin:18px auto 10px;display:flex;justify-content:flex-end;align-items:center;padding:0 12px}
.gg-wrap{max-width:1200px;box-sizing:border-box;margin:0 auto;padding:0 12px}

/* One width for every section of the player pages (stats / matches / segments /
   highlights / teammates / account), so nothing shifts horizontally when moving
   between tabs. Sections opt in with this class instead of each declaring its own
   max-width — one home for the page width. border-box so the class value IS the
   visible edge, which is what made the old containers disagree by their padding. */
.fa-section { width:90%; max-width:1200px; margin-left:auto; margin-right:auto; box-sizing:border-box; }
.gtv-shell{max-width:1200px;box-sizing:border-box;margin:8px auto 10px;display:flex;justify-content:flex-start;align-items:center;padding:0 12px}
.gbar-shell{max-width:1200px;box-sizing:border-box;margin:20px auto 10px;display:flex;align-items:center;padding:0 12px}
.gbar-left{flex:1;display:flex;align-items:center}
.gbar-right{margin-left:auto;display:flex;align-items:center}
.gg-filters{max-width:1200px;box-sizing:border-box;margin:8px auto 12px;display:flex;justify-content:flex-end;padding:0 12px}
.gg-seg{display:inline-flex;border:1px solid rgba(255,255,255,.1);border-radius:999px;overflow:hidden;background:rgba(255,255,255,.06)}
.gg-opt{appearance:none;border:0;background:transparent;color:#eaf0f4;padding:6px 12px;cursor:pointer;font-weight:700;letter-spacing:.2px}
.gg-opt[aria-pressed="true"]{background:rgba(255,255,255,.92);color:#0b0f14}
.gg-btn{appearance:none;background:linear-gradient(180deg,#1f2937,#19202b);border:1px solid rgba(255,255,255,.1);color:#eaf0f4;font-weight:800;border-radius:999px;padding:8px 14px;cursor:pointer;letter-spacing:.2px;box-shadow:0 8px 20px rgba(0,0,0,.45);transition:all .15s ease}
.gg-btn:hover{background:linear-gradient(180deg,#263143,#1c2430)}
.gg-btn.active{background:rgba(255,255,255,.92);color:#0b0f14;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.chart_background{background:linear-gradient(180deg, rgba(15,17,22,.62), rgba(12,14,18,.52));border:1px solid rgba(255,255,255,.08);border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.5);overflow:hidden;padding:10px}
.chart_background+.chart_background{margin-top:16px}
.chart_background > div, .chart_background[style]{height:100%;width:100%}
#graphs{margin-bottom:48px}

/* ===== pro_guesser.html =====
   Relocated verbatim from that partial's own <style> block. */
.tooltipO .tooltiptext2 {
    display: none;
    background-color: #004385;
    border-radius: 6px;
    position: absolute;
    font-weight: 200;
    padding: 10px;
    z-index: 1000;
    width: max-content;
    top: 20px;
    left: -20px;
}
.tooltipO:hover .tooltiptext2 { display: block; }
.pro-field-background{ border-radius: 5px; padding-left: 7px }
#pro-guesses tbody tr td { line-height: 2em; vertical-align: middle; }
[v-cloak] { display: none; }
.pg-flex-center { display:flex; justify-content:center; max-width:1120px; margin:auto; }

.m-0 { margin:0; }

/* ===== mini games (pro_guesser.html + pro_grid.html) =====
   Shared stage backdrop + player suggestion rows. */
.mg-stage{position:relative; border-radius:18px; padding:18px 14px 22px; border:1px solid rgba(255,255,255,.08); background:radial-gradient(1100px 460px at 50% -10%, rgba(255,85,0,.12), transparent 60%), linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.28)), #101418; box-shadow:0 18px 50px rgba(0,0,0,.45)}
.mg-stage::before{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size:44px 44px; -webkit-mask-image:radial-gradient(85% 65% at 50% 30%, #000, transparent); mask-image:radial-gradient(85% 65% at 50% 30%, #000, transparent)}
.mg-stage > *{position:relative}
.mg-suggest-item{display:flex; align-items:center; gap:10px; padding:7px 8px; border-radius:8px; cursor:pointer}
.mg-suggest-item:hover,.mg-suggest-item.is-hover{background:rgba(255,255,255,.08)}
.mg-suggest-img{width:30px; height:30px; object-fit:cover; object-position:top; border-radius:50%; background:rgba(255,255,255,.06)}
.mg-suggest-name{font-weight:700; color:#fff}
.mg-suggest-team{margin-left:auto; font-size:12px; color:#aab4be; text-align:right}
.mg-player-card{display:flex; align-items:center; gap:16px; margin-top:14px}
.mg-p-left{flex:0 0 96px}
.mg-p-avatar{width:96px; height:96px; border-radius:12px; object-fit:cover; border:2px solid rgba(255,255,255,.08); box-shadow:0 8px 20px rgba(0,0,0,.45); background:rgba(255,255,255,.04)}
.mg-p-mid{flex:1 1 auto; min-width:0}
.mg-p-nameRow{display:flex; align-items:center; gap:10px}
.mg-p-flag{height:18px; border-radius:2px}
.mg-p-name{font-size:1.4rem; font-weight:900; color:#fff; text-decoration:none}
.mg-p-countryName{font-size:13px; color:#cfd6dd}
.mg-p-teamRow{display:flex; align-items:center; gap:10px; margin-top:6px; color:#e7edf2; font-weight:700}
.mg-p-teamLogo{height:26px}
.mg-p-teamName{letter-spacing:.1px}
.mg-p-right{flex:0 0 auto; display:flex; gap:8px}
.mg-p-right img{width:28px; height:28px; border-radius:50%; box-shadow:0 1px 6px rgba(0,0,0,.4)}

/* ===== highlights.html =====
   Relocated verbatim from that partial's own <style> block. display:none
   defaults are safe as classes here — setActiveMetric() and the initial
   "show first metric" script both set el.style.display directly, which
   always wins over these class defaults. */
.metric-chipbar{display:flex;justify-content:flex-start;align-items:center;margin:0;padding:0}
.metric-seg{display:flex;gap:0;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.06);padding:4px;border-radius:999px;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.metric-opt{appearance:none;background:transparent;border:0;color:#cfd6de;font-weight:800;padding:6px 12px;border-radius:999px;cursor:pointer;font-size:.88rem;letter-spacing:.25px;transition:all .2s ease}
.metric-opt:hover{background:rgba(255,255,255,.08);color:#eaf0f6}
.metric-opt.active{background:rgba(255,255,255,.92);color:#0b0f14;box-shadow:0 4px 14px rgba(0,0,0,.35), inset 0 -1px 0 rgba(0,0,0,.08)}
@media(max-width:780px){.metric-chipbar{order:-1;margin:0 auto}.metric-opt{padding:6px 10px;font-size:.84rem}}
.hl-title { margin-left:5px; }
.hl-table-wrap { margin-top:6px; }

/* ===== filter drawer (partial_filters.html) =====
   Relocated verbatim from that partial's own <style> block. */
.drawer-group { border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.04); border-radius: 8px; margin: 10px 0; }
.drawer-group .dg-header { display:flex; align-items:center; justify-content:space-between; padding: 8px 10px; cursor: pointer; user-select: none; }
.drawer-group .dg-title { font-weight: 700; opacity: .95; }
.drawer-group .dg-count { opacity:.7; font-size: 12px; }
.drawer-group .dg-body { padding: 6px 8px 8px; display:none; }
.drawer-group.open .dg-body { display:block; }
.drawer-group .option { padding: 6px 8px; border-radius: 6px; }
.drawer-group .option:hover { background: rgba(255,255,255,.06); }
.drawer-group .option.selected { outline: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08); }
.dg-chevron { opacity:.8; transition: transform .12s ease; }
.drawer-group.open .dg-chevron { transform: rotate(90deg); }

/* ===== rank_distribution.html =====
   Relocated verbatim from that partial's own <style> block, EXCEPT its
   .pcard/.pcard h1 rules — those redeclare the shared .pcard (canonical
   definition lives in partial_percentile.html's migrated block above) with a
   narrower max-width (980px vs 1200px) for this page only. Relocating that
   part globally would silently change the percentile card's width on every
   other page, so it stays as a small local override in the template. */
.rank-distribution-container {
    max-width: 980px;
    margin: 20px auto 60px;
    padding: 0 14px;
}
.region-select {
    background: #2d2d2d;
    color: #ffffff;
    border: 1px solid #444;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 14px;
    cursor: pointer;
    min-width: 150px;
}
.region-select:focus {
    outline: none;
    border-color: #d2691e;
}
.rank-table-container {
    background: linear-gradient(180deg, rgba(15,17,22,.62), rgba(12,14,18,.52));
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0,0,0,.5);
    backdrop-filter: blur(6px);
    overflow: hidden;
    margin-bottom: 20px;
}
.rank-distribution-table {
    width: 100%;
    border-collapse: collapse;
    background: transparent;
}
.rank-distribution-table th {
    background: rgba(255,255,255,.05);
    color: #b0b0b0;
    padding: 16px;
    text-align: left;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.rank-distribution-table th.text-center { text-align: center; }
.rank-row {
    border-bottom: 1px solid rgba(255,255,255,.05);
    transition: background-color 0.2s ease;
}
.rank-row:hover { background: rgba(255,255,255,.03); }
.rank-distribution-table td {
    padding: 12px 16px;
    vertical-align: middle;
    color: #eaf0f4;
}
.tier-cell { text-align: center; width: 80px; }
.rank-icon { width: 45px; height: 45px; object-fit: contain; }
.rank-name-cell { font-size: 16px; font-weight: 500; }
.population-cell { text-align: center; font-family: 'Consolas', monospace; font-size: 14px; }
.percentage-cell { text-align: center; font-family: 'Consolas', monospace; font-size: 14px; color: #00d4aa; }
.summary-container {
    background: linear-gradient(180deg, rgba(15,17,22,.62), rgba(12,14,18,.52));
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0,0,0,.5);
    backdrop-filter: blur(6px);
    padding: 16px;
    text-align: center;
    color: #b0b0b0;
}
@media (max-width: 768px) {
    .rank-distribution-table th,
    .rank-distribution-table td { padding: 8px 6px; font-size: 12px; }
    .rank-icon { width: 35px; height: 35px; }
}
/* Population histogram — matches the global-stats viewer */
.rd-chart-card { background: linear-gradient(180deg, rgba(15,17,22,.62), rgba(12,14,18,.52)); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.5); backdrop-filter: blur(6px); padding: 18px 20px; margin: 16px 0 20px; }
.rd-card-hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.rd-card-title { display: inline-flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 600; color: #eaf0f4; }
.rd-card-title .dot { width: 8px; height: 8px; border-radius: 50%; background: #e8842a; box-shadow: 0 0 10px rgba(232,132,42,.8); }
.rd-plot { display: flex; align-items: flex-start; gap: 10px; }
.rd-yaxis { position: relative; width: 44px; height: 240px; flex-shrink: 0; }
.rd-ytick { position: absolute; right: 0; transform: translateY(-50%); font-size: 10px; color: #7a8a98; font-family: 'Consolas', monospace; white-space: nowrap; }
.rd-cols-wrap { position: relative; flex: 1 1 auto; min-width: 0; }
.rd-grid { position: absolute; top: 0; left: 0; right: 0; height: 240px; pointer-events: none; }
.rd-gridline { position: absolute; left: 0; right: 0; height: 1px; background: rgba(255,255,255,.07); }
.rd-hist { position: relative; display: flex; align-items: flex-end; gap: 6px; z-index: 1; }
.rd-col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.rd-bar-wrap { position: relative; width: 100%; height: 240px; display: flex; align-items: flex-end; }
.rd-bar { width: 100%; min-height: 2px; height: 0; background: linear-gradient(180deg, #e8842a, #8a3d12); border-radius: 4px 4px 0 0; transition: height .8s cubic-bezier(.22,1,.36,1); }
.rd-col:hover .rd-bar { filter: brightness(1.35); }
.rd-bar-tip { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 6px; background: #0b0f14; border: 1px solid rgba(255,255,255,.12); border-radius: 6px; padding: 5px 9px; font-size: 12px; white-space: nowrap; color: #eaf0f4; opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 5; }
.rd-bar-tip .c { color: #e8842a; font-weight: 700; }
.rd-col:hover .rd-bar-tip { opacity: 1; }
.rd-bar-icon { width: 34px; height: 34px; object-fit: contain; }
@media (max-width: 768px) {
    .rd-yaxis, .rd-bar-wrap, .rd-grid { height: 170px; }
    .rd-bar-icon { width: 26px; height: 26px; }
    .rd-hist { gap: 3px; }
}

/* ===== match analyser player card, right-team mirroring (partial_matchanalyser_player_card.html) =====
   .player/.player-left/.player-right/.name-row/.badges/.pill are all defined
   with #header_content-scoped rules in main.css (specificity (1,0,x)) — this
   partial only ever renders inside #header_content (matchanalyser.html), so
   these overrides are scoped to match and safely win without !important. */
#header_content .player.mac-rtl { flex-direction: row-reverse; }
#header_content .player-left.mac-rtl { flex-direction: row-reverse; }
#header_content .name-row.mac-rtl { flex-direction: row-reverse; }
#header_content .nick-link.mac-right { text-align: right; max-width: 210px; }
#header_content .player-right.mac-start { align-items: flex-start; }
#header_content .badges.mac-start { justify-content: flex-start; }
#header_content .pill.pill--afk { background:rgba(255,152,0,.15); color:#ffab40; border:1px solid rgba(255,152,0,.3); }
#header_content .pill.pill--leaver { background:rgba(244,67,54,.15); color:#f28b82; border:1px solid rgba(244,67,54,.3); }

/* ===== leaderboards.html =====
   Relocated verbatim from that partial's own <style> block. */
.lb-page { max-width: 900px; margin: 20px auto 60px; padding: 0 14px; color: #eaf0f4; }
.lb-card { background: linear-gradient(180deg, rgba(15,17,22,.62), rgba(12,14,18,.52)); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.5); backdrop-filter: blur(6px); padding: 16px 18px; margin-bottom: 16px; }
.lb-controls { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.lb-ctrl { display: flex; flex-direction: column; gap: 6px; }
.lb-ctrl label { color: #b0b0b0; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; font-weight: 600; }
.lb-ctrl.metric { margin-right: auto; }
.lb-select { background: #2d2d2d; color: #fff; border: 1px solid #444; border-radius: 8px; padding: 8px 12px; font-size: 14px; cursor: pointer; min-width: 150px; }
.lb-select:focus { outline: none; border-color: #d2691e; }
.lb-table-card { padding: 6px 6px 14px; overflow-x: auto; }
.lb-table { width: 100%; border-collapse: collapse; }
.lb-table th { text-align: right; padding: 10px 14px; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: #7a8a98; border-bottom: 1px solid rgba(255,255,255,.08); }
.lb-table th.left { text-align: left; }
.lb-table td { padding: 9px 14px; text-align: right; border-bottom: 1px solid rgba(255,255,255,.05); font-size: 14px; white-space: nowrap; }
.lb-table td.left { text-align: left; }
.lb-table tr:last-child td { border-bottom: none; }
.lb-table tbody tr:hover td { background: rgba(255,255,255,.03); }
.lb-rank { font-family: 'Consolas', monospace; color: #9fb0bd; width: 48px; }
.lb-rank.lb-gold { color: #ffd24a; font-weight: 800; }
.lb-rank.lb-silver { color: #cfd6de; font-weight: 800; }
.lb-rank.lb-bronze { color: #e0975a; font-weight: 800; }
.lb-player { display: inline-flex; align-items: center; gap: 9px; color: #eaf0f4; text-decoration: none; font-weight: 600; }
.lb-player:hover { color: #f59433; }
.lb-av { width: 26px; height: 26px; border-radius: 6px; object-fit: cover; border: 1px solid rgba(255,255,255,.12); flex-shrink: 0; }
.lb-badges { display: flex; align-items: center; gap: 8px; }
.lb-flag { height: 14px; width: auto; border-radius: 2px; vertical-align: middle; margin-right: 6px; }
.lb-hltv { display: inline-flex; flex-shrink: 0; }
.lb-hltv img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; opacity: .95; }
.lb-hltv:hover img { opacity: 1; }
.lb-lvl { height: 22px; display: inline-block; vertical-align: middle; }
.lb-val { font-family: 'Consolas', monospace; font-weight: 700; color: #f59433; }
.lb-dim { color: #9fb0bd; font-family: 'Consolas', monospace; }
/* Pager styles are shared (.pager / .pager-btn / .pager-info in main.css). */
.lb-empty { text-align: center; color: #7a8a98; font-size: 14px; padding: 30px 12px; }
.lb-note { margin: 0; font-size: 11px; color: #7a8a98; line-height: 1.45; }
.lb-note-row { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; margin-top: 12px; }
.link-accent { color: #f59433; font-size: 12px; font-weight: 700; text-decoration: none; }
.link-accent:hover { text-decoration: underline; }
@media (max-width: 600px) { .lb-table th, .lb-table td { padding: 8px 9px; } }

/* ===== user oauth menu (partial_oauth.html) =====
   .oauth-menu's display:none default is safe as a class — user_menu_toggle()
   and the outside-click/Escape handlers all set menu.style.display directly,
   which always wins. */
.oauth-trigger-wrap { position:relative; padding-top:5px; }
.oauth-trigger-btn { padding:0; overflow:hidden; }
.oauth-menu { display:none; right:0; width:220px; }
.oauth-avatar-44 { width:44px; height:44px; border-radius:10px; object-fit:cover; }
.oauth-avatar-36 { width:36px; height:36px; border-radius:6px; object-fit:cover; }
.oauth-menu-header { padding:14px 16px; display:flex; align-items:center; gap:10px; border-bottom:1px solid rgba(255,255,255,.1); }
.oauth-menu-info { line-height:1.3; }
.oauth-menu-name { color:#fff; font-weight:bold; font-size:14px; }
.oauth-menu-meta { color:#aaa; font-size:12px; }

/* ===== sponsor banners (partial_sponsor.html) =====
   .sponsor-fallback's display:none is safe as a class — showFallback() sets
   fallback.style.display directly, which always wins. */
.sponsor-banner-pad { padding:40px; text-align:center; padding-bottom:10px; }
.sponsor-img-810 { border-radius:10px; width:810px; height:133px; }
.sponsor-iframe { border:none; border-radius:8px; }
.sponsor-fallback { display:none; }
.sponsor-home-pad { padding:50px; text-align:center; padding-bottom:0px; }
.sponsor-home-link { display:inline-block; max-width:100%; }
/* pointer-events:none keeps the click on the wrapping link, not the video element */
.sponsor-home-video { width:810px; max-width:100%; height:auto; aspect-ratio:1080/266;
                     display:block; border-radius:10px; pointer-events:none; }
/* matches the 900px cutoff that hides .sponsor-banner (main.css) */
@media screen and (max-width: 900px) { .sponsor-home-pad { display:none; } }

/* ===== error page (500.html) ===== */
.err-wrap { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:70vh; padding:40px 20px; text-align:center; }
.err-icon { width:64px; height:64px; margin-bottom:24px; opacity:.7; }
.err-title { color:#e0e8f0; font-size:2rem; font-weight:700; margin:0 0 12px; }
.err-msg { color:#8b9ab0; font-size:1.05rem; max-width:460px; margin:0 0 32px; line-height:1.6; }
.err-btn { display:inline-block; background:#ff5500; color:#fff; font-weight:600; font-size:.95rem; padding:12px 28px; border-radius:6px; text-decoration:none; letter-spacing:.3px; }

/* ===== mini game/promo cards (partial_pro.html) ===== */
.stats-card-scale85 { transform:scale(0.85); transform-origin:center; margin:-5px; }

/* ===== segmented toggle wrapper + match-analyser tab panels =====
   display defaults here are safe as classes — resetActiveTab()/activateMatchTab()
   in script.js set el.style.display directly on every tab switch, which always wins. */
/* padding-bottom is left to .stats_container so this row sits on the same vertical
   rhythm as every other section; --flush opts back out for a page that wants the
   toggle tight against what follows it */
.tv-wrap-block { display:block; position:relative; z-index:30; }
.tv-wrap-block--flush { padding-bottom:0; }
/* Two separate things fight a tooltip escaping this row:
   1. .stats_container carries overflow:auto, which clips it the moment it leaves the
      row's box — nothing here scrolls, so the row opts back out.
   2. .stat-card and .pcard below both use backdrop-filter, which makes each a
      stacking context that paints over an earlier sibling's descendants no matter
      what z-index they carry. Lifting the whole row settles it. 30 stays far below
      the navbar/modal layers (9000+). */
.d-block { display:block; }
.ma-error-wrap { display:flex; justify-content:center; margin-top:20px; }
/* match analyser with no match loaded: the viewer still renders so a replay file can be opened */
.ma-standalone-viewer { max-width:1400px; margin:24px auto 0; padding:0 16px; }
/* the viewer alone, framed in FACEIT's match room by the extension (matchanalyser_embed.html) */
.ma-embed { padding:8px; }
/* the framing widget is sized to the viewer's full height (it reports it): never a scrollbar inside the frame; no navbar, so no offset for it */
body:has(> .ma-embed) { overflow:hidden; padding-top:0; }

/* ===== "no data" placeholder headings (faceit_analyser_base.html, matches.html) ===== */
.no-data-title { font-weight:700; font-size:30px; margin-top:100px; text-align:center; }
.no-data-subtitle { font-size:16px; text-align:center; }

/* ===== match analyser stats tab (partial_matchanalyser_stats.html) =====
   Relocated verbatim from that partial's own <style> block. */
#match_nav_bar_mobile a.active_page{ color:#fff; font-weight:700; text-decoration:underline; }

/* Outer layout + Field Analysis debug panel (permanently hidden — its
   data-generating functions are dead code, kept only in case they're
   revived; the toggle button itself still runs, just against an
   otherwise-empty panel) */
.stats-outer-wrap { display:flex; flex-direction:column; gap:24px; padding-bottom:40px; }
.stats-card-1280 { max-width:1280px; margin:0 auto; width:100%; }
.stats-debug-panel { padding:20px; }
.stats-debug-head { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.stats-debug-title { font-size:18px; opacity:.9; margin:0; }
.stats-debug-toggle-btn { background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2); color:white; padding:4px 8px; border-radius:4px; font-size:12px; cursor:pointer; }
.stats-debug-body { font-size:12px; opacity:.7; line-height:1.4; }
.stats-categories-row { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.stats-table-scroll { overflow-x:auto; }

/* Placeholder / empty-state messages injected into #stats-tables-container */
.stat-msg-error { padding:20px; text-align:center; color:#ff6b6b; }
.stat-msg-empty { padding:20px; text-align:center; opacity:.7; }

/* Category chip base look — :hover/.active overrides below use !important
   and already win over this regardless of source order */
.stats-category-chip {
	background: rgba(255,255,255,0.1);
	border: 1px solid rgba(255,255,255,0.2);
	color: white;
	padding: 8px 12px;
	border-radius: 20px;
	font-size: 13px;
	cursor: pointer;
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	gap: 6px;
}
.stats-chip-count { background:rgba(255,255,255,0.2); padding:2px 6px; border-radius:10px; font-size:11px; }

/* Stats table (buildCategoryTableWithOrder) */
.stat-table { width:100%; font-size:13px; border-collapse:collapse; }
.stat-thead-row { background:rgba(255,255,255,0.1); }
.stat-th-player { padding:12px 8px; text-align:left; border-bottom:1px solid rgba(255,255,255,0.1); position:sticky; left:0; background:rgba(0,0,0,0.8); z-index:1; }
.stat-th { padding:12px 8px; text-align:center; border-bottom:1px solid rgba(255,255,255,0.1); white-space:nowrap; cursor:pointer; user-select:none; }
.stat-team-row { background:rgba(255,255,255,0.05); }
.stat-team-cell { padding:8px; font-weight:600; font-size:14px; border-top:2px solid rgba(255,255,255,0.2); text-align:left; }
.stat-row { border-bottom:1px solid rgba(255,255,255,0.05); }
.stat-skill-icon { width:16px; height:16px; margin-right:8px; vertical-align:middle; }
.stat-crosshair { position:absolute; right:8px; cursor:pointer; opacity:.7; font-size:16px; user-select:none; }
.stat-player-link { color:inherit; text-decoration:none; }
/* position:relative deliberately comes after position:sticky here to match
   the pre-existing computed style exactly (the later property wins) */
.stat-player-cell { padding:10px 8px; font-weight:500; position:sticky; left:0; background:rgba(0,0,0,0.8); z-index:1; border-right:1px solid rgba(255,255,255,0.1); text-align:left; position:relative; }
.stat-cell { padding:10px 8px; text-align:center; }

/* ===== match analyser: lobby tab (partial_matchanalyser_lobby.html) =====
   Lobby reuses the stat-table look but its headers are not sortable */
.ma-lobby .stat-th { cursor:default; }

/* Stats table specific styles */
#stats-table {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

#stats-table th {
	font-weight: 600;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	opacity: 0.9;
}

#stats-table td {
	transition: background-color 0.2s ease;
}

#stats-table tbody tr:hover {
	background: rgba(255,255,255,0.03);
}

/* Category chips */
.stats-category-chip:hover {
	background: rgba(157,229,157,0.15) !important;
	border-color: rgba(157,229,157,0.3) !important;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.stats-category-chip.active {
	background: rgba(157,229,157,0.2) !important;
	border-color: rgba(157,229,157,0.4) !important;
}

/* Grouped stats styling */
.stats-category-table td {
	font-variant-numeric: tabular-nums;
}

/* Sortable table headers */
.stats-category-table th[onclick] {
	transition: background-color 0.2s ease;
}

.stats-category-table th[onclick]:hover {
	background: rgba(255, 255, 255, 0.15) !important;
}

/* Custom tooltip styles (renamed from the original .custom-tooltip — that
   name collided with a differently-positioned tooltip of the same name in
   partial_matchanalyser_overview.html once both landed in this shared file) */
.tooltip-container {
	position: relative;
	display: inline-block;
	cursor: pointer;
}

.stat-th-tooltip {
	visibility: hidden;
	opacity: 0;
	position: fixed;
	background: rgba(0, 0, 0, 0.9);
	color: white;
	padding: 10px 14px;
	border-radius: 8px;
	font-size: 13px;
	white-space: nowrap;
	z-index: 9999;
	transition: opacity 0.3s ease, visibility 0.3s ease;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
	border: 1px solid rgba(255, 255, 255, 0.3);
	pointer-events: none;
	font-weight: 500;
}

.stat-th-tooltip::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -6px;
	border-width: 6px;
	border-style: solid;
	border-color: rgba(0, 0, 0, 0.9) transparent transparent transparent;
}

.tooltip-container:hover .stat-th-tooltip {
	visibility: visible;
	opacity: 1;
}

/* Responsive */
@media (max-width: 768px) {
	.stats-category-table table {
		font-size: 11px;
	}

	.stats-category-table th,
	.stats-category-table td {
		padding: 8px 4px;
	}

	#stats-categories {
		gap: 6px;
	}

	.stats-category-chip {
		padding: 6px 10px !important;
		font-size: 12px !important;
	}
}

/* ===== compare.html (VS comparison page) =====
   Relocated verbatim from that partial's own <style> block, minus its local
   .ov-game/.ov-games redeclaration (left in place there for now — that's a
   workaround for overview.html's copy not being global yet; unify when
   overview.html's own <style> block gets migrated).
   The --vs-* palette lives in tokens.css. */

/* ── Pick-mode (kept for /compare/<player> route) ────────── */
.cmp-page { max-width: 960px; margin: 0 auto; padding: 0 12px 48px; }
.cmp-header { display: flex; align-items: stretch; margin: 24px 0 12px; }
.cmp-player-card {
  flex: 1; background: var(--vs-bg); border: 1px solid var(--vs-border);
  padding: 22px 16px 18px; display: flex; flex-direction: column;
  align-items: center; gap: 10px; text-decoration: none;
  transition: border-color .15s; min-width: 0;
}
.cmp-player-card.p1 { border-top: 2px solid var(--vs-p1); border-radius: 14px 0 0 14px; border-right: none; }
.cmp-avatar { width: 68px; height: 68px; border-radius: 10px; object-fit: cover; border: 2px solid rgba(255,255,255,.06); flex-shrink: 0; }
.cmp-name { font-size: 1.05rem; font-weight: 800; color: var(--vs-text); text-align: center; word-break: break-all; }
.cmp-name-row { display: flex; align-items: center; gap: 6px; justify-content: center; flex-wrap: wrap; }
.cmp-flag { height: 13px; }
.cmp-elo-row { display: flex; align-items: center; gap: 7px; }
.cmp-lvl-img { height: 26px; }
.cmp-elo-val { font-size: 1.2rem; font-weight: 900; color: var(--vs-win); }
.cmp-elo-lbl { font-size: 10px; color: var(--vs-muted); font-weight: 600; }
.cmp-pick-wrap { max-width: 540px; margin: 32px auto 48px; text-align: center; }
.cmp-pick-heading { font-size: 1rem; font-weight: 700; color: var(--vs-muted); margin-bottom: 18px; }

/* ── VS page container ───────────────────────────────────── */
.vs-page { width: 100%; max-width: 960px; margin: 0 auto; padding: 20px 12px 60px; box-sizing: border-box; }

/* ── Dual header ─────────────────────────────────────────── */
.vs-header { display: flex; align-items: stretch; margin: 24px 0 14px; }
.vs-card {
  flex: 1; display: flex; align-items: center; gap: 16px;
  padding: 20px 18px; text-decoration: none;
  background: var(--vs-bg); border: 1px solid var(--vs-border);
  transition: background .15s, border-color .15s; min-width: 0;
}
.vs-card.vs-p1 { border-top: 3px solid var(--vs-p1); border-radius: 14px 0 0 14px; border-right: none; }
.vs-card.vs-p2 { border-top: 3px solid var(--vs-p2); border-radius: 0 14px 14px 0; border-left: none; flex-direction: row-reverse; }
.vs-card:hover { background: linear-gradient(180deg,rgba(20,23,30,.72),rgba(15,18,24,.62)); border-color: rgba(255,255,255,.13); }
.vs-avatar { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; border: 2px solid rgba(255,255,255,.06); flex-shrink: 0; }
.vs-card-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.vs-card.vs-p2 .vs-card-info { align-items: flex-end; }
.vs-name-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.vs-card.vs-p2 .vs-name-row { justify-content: flex-end; }
.vs-name { font-size: 1.05rem; font-weight: 800; color: var(--vs-text); word-break: break-all; line-height: 1.2; }
.vs-flag { height: 13px; flex-shrink: 0; }
.vs-elo-row { display: flex; align-items: center; gap: 7px; }
.vs-level { height: 27px; }
.vs-elo-val { font-size: 1.15rem; font-weight: 900; color: var(--vs-win); }
.vs-elo-lbl { font-size: 10px; color: var(--vs-muted); font-weight: 600; }
/* VS divider */
.vs-mid {
  flex: 0 0 52px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px;
  background: rgba(255,255,255,.022);
  border-top: 1px solid var(--vs-border);
  border-bottom: 1px solid var(--vs-border);
}
.vs-mid-text { font-size: 11px; font-weight: 900; color: rgba(235,240,244,.3); letter-spacing: 1.5px; }
.vs-swap {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  color: var(--vs-muted); font-size: 16px; width: 30px; height: 30px;
  border-radius: 8px; cursor: pointer; display: flex; align-items: center;
  justify-content: center; transition: all .15s; line-height: 1;
}
.vs-swap:hover { background: rgba(255,255,255,.12); color: var(--vs-text); }

/* ── Action bar ──────────────────────────────────────────── */
.vs-actions {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px; flex-wrap: wrap; gap: 8px;
}
.vs-hwm {
  font-size: 11px; font-weight: 700; color: var(--vs-muted);
  text-decoration: none; border: 1px solid rgba(255,255,255,.1);
  padding: 5px 12px; border-radius: 8px; background: rgba(255,255,255,.04);
  transition: all .15s;
}
.vs-hwm:hover { background: rgba(255,255,255,.08); color: var(--vs-text); }

/* ── Glass sections ──────────────────────────────────────── */
.vs-section {
  width: 100%; background: var(--vs-bg); border: 1px solid var(--vs-border);
  border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.5);
  margin-bottom: 14px; overflow: hidden; box-sizing: border-box;
}
.vs-section-hd {
  padding: 11px 18px 9px; border-bottom: 1px solid rgba(255,255,255,.05);
  display: flex; align-items: center;
}
.vs-section-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: rgba(235,240,244,.75); }

/* ── Scoreboard ──────────────────────────────────────────── */
.vs-scoreboard {
  display: flex; align-items: center; justify-content: center;
  padding: 18px 24px 10px; gap: 0;
}
.vs-score-side { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.vs-score-side.left  { align-items: flex-end;   padding-right: 20px; }
.vs-score-side.right { align-items: flex-start; padding-left: 20px; }
.vs-score-num { font-size: 2.8rem; font-weight: 900; color: var(--vs-win); line-height: 1; }
.vs-score-num.zero { color: rgba(235,240,244,.2); }
.vs-score-name { font-size: 11px; font-weight: 700; color: var(--vs-muted); }
.vs-score-mid { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.vs-score-sep { font-size: 1.6rem; font-weight: 900; color: rgba(235,240,244,.25); line-height: 1; }
.vs-score-cap { font-size: 9px; font-weight: 600; color: rgba(235,240,244,.22); text-transform: uppercase; letter-spacing: .5px; white-space: nowrap; }
/* Score bar */
.vs-score-bar { height: 4px; display: flex; margin: 0 18px 14px; border-radius: 2px; overflow: hidden; background: rgba(255,255,255,.05); }
.vs-score-bar .l { background: linear-gradient(to right, rgba(255,120,0,.25), var(--vs-p1)); border-radius: 2px 0 0 2px; width: 50%; transition: width .6s cubic-bezier(.4,0,.2,1); }
.vs-score-bar .r { flex: 1; background: linear-gradient(to right, var(--vs-p2), rgba(87,203,222,.25)); border-radius: 0 2px 2px 0; }

/* ── Section player name header ──────────────────────────── */
.vs-section-names {
  display: grid; grid-template-columns: 1fr 1fr;
  padding: 7px 18px 5px; border-bottom: 1px solid rgba(255,255,255,.03);
}
.vs-pname { font-size: 11px; font-weight: 700; color: rgba(235,240,244,.45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vs-pname.p2 { text-align: right; }

/* ── Stat rows — fixed number columns so all bars align ─────────────── */
.vs-row {
  display: grid; grid-template-columns: 90px 1fr 90px; width: 100%;
  align-items: center; padding: 9px 18px; box-sizing: border-box;
  border-bottom: 1px solid rgba(255,255,255,.03);
}
.vs-row:last-child { border-bottom: none; }
.vs-row:hover { background: rgba(255,255,255,.016); }
.vs-row.is-total { background: rgba(0,0,0,.1); }
.vs-row.is-total .vs-val { font-size: .85rem; color: rgba(235,240,244,.35); }
.vs-val { font-size: 1rem; font-weight: 800; color: rgba(235,240,244,.45); transition: color .2s; }
.vs-val.p1 { text-align: right; padding-right: 14px; }
.vs-val.p2 { text-align: left;  padding-left:  14px; }
.vs-val.win  { color: var(--vs-win);  }
.vs-val.lose { color: var(--vs-lose); }
.vs-metric { text-align: center; }
.vs-mlabel { display: block; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: rgba(235,240,244,.75); margin-bottom: 4px; }
/* Tug-of-war bar with pivot dot */
.vs-bar { position: relative; }
.vs-bar-track { height: 6px; display: flex; border-radius: 3px; overflow: hidden; background: rgba(255,255,255,.06); }
.vs-bar-l { flex-shrink: 0; height: 100%; background: linear-gradient(to right, rgba(255,120,0,.2), rgba(255,120,0,.95)); width: 50%; transition: width .55s cubic-bezier(.4,0,.2,1); }
.vs-bar-r { flex: 1; height: 100%; background: linear-gradient(to right, rgba(87,203,222,.95), rgba(87,203,222,.2)); }
.vs-bar-pivot { position: absolute; top: -3px; width: 12px; height: 12px; border-radius: 50%; background: rgba(235,240,244,.8); transform: translateX(-50%); pointer-events: none; left: 50%; transition: left .55s cubic-bezier(.4,0,.2,1); border: 2px solid rgba(0,0,0,.4); }

/* ── Radar chart ─────────────────────────────────────────── */
.vs-radar-wrap { padding: 14px 18px 8px; display: flex; flex-direction: column; align-items: center; }
.vs-radar-cap { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; color: rgba(235,240,244,.28); margin-bottom: 6px; }
.vs-radar { width: 100%; max-width: 440px; }
.vs-radar-grid  { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 1; }
.vs-radar-spoke { stroke: rgba(255,255,255,.05); stroke-width: 1; }
.vs-radar-ringlbl { font-size: 8px; fill: rgba(235,240,244,.22); font-family: inherit; }
.vs-radar-axis    { font-size: 9.5px; fill: rgba(235,240,244,.45); font-family: inherit; font-weight: 700; }
.vs-radar-legend { display: flex; gap: 18px; margin-top: 10px; }
.vs-radar-chip { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; color: rgba(235,240,244,.5); }
.vs-radar-chip .sw { width: 14px; height: 3px; border-radius: 2px; display: inline-block; flex-shrink: 0; }
.vs-radar-chip.p1 .sw { background: var(--vs-p1); }
.vs-radar-chip.p2 .sw { background: var(--vs-p2); }
.vs-radar-divider { height: 1px; background: rgba(255,255,255,.05); margin: 4px 18px 2px; }
.vs-radar-tip { position: fixed; pointer-events: none; display: none; background: rgba(12,15,20,.96); border: 1px solid rgba(255,255,255,.12); border-radius: 8px; padding: 8px 12px; font-size: 11px; color: #eaf0f4; z-index: 999; min-width: 130px; line-height: 1.7; }

/* ── Map rows ────────────────────────────────────────────── */
.vs-map-row {
  display: grid; grid-template-columns: 1fr 110px 1fr;
  align-items: center; padding: 8px 18px;
  border-bottom: 1px solid rgba(255,255,255,.03); gap: 6px;
}
.vs-map-row:last-child { border-bottom: none; }
.vs-map-row:hover { background: rgba(255,255,255,.016); }
.vs-map-cell { display: flex; flex-direction: column; gap: 2px; }
.vs-map-cell.p2 { align-items: flex-end; }
.vs-map-wr { font-size: 13px; font-weight: 800; color: rgba(235,240,244,.45); }
.vs-map-wr.win    { color: var(--vs-win);  }
.vs-map-wr.lose   { color: var(--vs-lose); }
.vs-map-wr.nodata { color: rgba(235,240,244,.18); }
.vs-map-meta   { font-size: 10px; color: rgba(235,240,244,.3); font-weight: 600; }
.vs-map-center { text-align: center; }
.vs-map-img    { width: 100%; height: 26px; object-fit: contain; opacity: .55; display: block; }
.vs-map-label  { font-size: 9px; font-weight: 700; color: rgba(235,240,244,.32); text-transform: uppercase; letter-spacing: .5px; margin-top: 3px; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 640px) {
  .vs-header { flex-direction: column; gap: 8px; }
  .vs-card.vs-p1, .vs-card.vs-p2 { border-radius: 12px; border-left: 1px solid var(--vs-border); border-right: 1px solid var(--vs-border); }
  .vs-card.vs-p2 { flex-direction: row; }
  .vs-card.vs-p2 .vs-card-info { align-items: flex-start; }
  .vs-card.vs-p2 .vs-name-row { justify-content: flex-start; }
  .vs-mid { flex-direction: row; height: 40px; border-radius: 8px; border: 1px solid var(--vs-border); }
  .vs-row { grid-template-columns: 70px 1fr 70px; padding: 8px 12px; }
  .vs-val { font-size: .88rem; }
  .vs-map-row { grid-template-columns: 1fr 80px 1fr; }
}

@media (max-width: 780px) {
    .ao-grid  { flex-direction: column; }
    .ao-card  { padding: 12px 14px; }
}

/* ===== segment table sub-nav (partial_segment_table.html) =====
   Small-variant modifiers for the shared .ov-game/.ov-games pill switcher
   (base rules live in overview.html's own <style> block, not yet migrated —
   these override padding/font-size for this narrower sub-nav context only,
   scoped under .segment-nav so the base .ov-game elsewhere is untouched). */
.segment-nav .ov-games { font-size:10px; }
.segment-nav .ov-game { padding:4px 10px; }
.segment-nav .ov-game.active { cursor:default; }
.filter-search-bar--narrow { max-width:260px; }

/* ===== percentile bar (partial_percentile.html) =====
   Relocated verbatim from that partial's own <style> block, plus the many
   repeated inline styles below it. The per-level divider width:X% values stay
   inline in the template — those genuinely differ per skill level and per
   game, not decorative duplication. #bar/#bar10/lvlN_svg/lvlN_txt opacity and
   width are all set directly via el.style.* in stats.html's updateLvlBar() JS,
   which always wins over these CSS defaults, so folding the initial state in
   here is safe. */
.pcard{max-width:1200px;margin:0 auto;padding:14px 12px;box-sizing:border-box;background:linear-gradient(180deg, rgba(15,17,22,.62), rgba(12,14,18,.52));border:1px solid rgba(255,255,255,.08);border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.5);backdrop-filter:blur(6px);color:#eaf0f4;position:relative}
.pcard h3{margin:0 0 14px 0;text-align:center;font-weight:500;letter-spacing:.2px}
.pcard h3 .tooltipO{font-weight:800}
.pcard h3 .tooltipO.clickable{cursor:pointer;}
/* placement only — .fa-icon-btn paints it */
.percentile-helpBtn{position:absolute;top:12px;right:12px}

.pctl-percent { color:chocolate; display:inline-block; }
/* the same headline slot when FACEIT has no rank for the player: it states an absence,
   so it should not shout like the figure it stands in for */
.pctl-unranked { color:var(--c-muted); font-weight:600; }
.tooltipO .tooltiptext.pctl-tip { width:max-content; color:#fff; font-size:16px; }
.pctl-strong { color:chocolate; font-weight:bold; }
.pctl-track-wrap { width:92%; }
.pctl-bar10-wrap { width:8%; }
.pctl-lastcol { width:100%; text-align:center; }
#bar10 { width:100%; }
.lvl-mark { display:inline-block; opacity:.5; }
.lvl-mark-txt { margin-top:2px; opacity:.5; }

/* ===== match analyser: header / scorebar (partial_matchanalyser_header.html) =====
   #header_content wraps this partial, and main.css has ID-scoped rules for
   .scorebar .side / .mid (specificity (1,0,3)) that this page overrides.
   Inline style="" always wins regardless of specificity, so the override
   classes below are deliberately re-scoped under #header_content .scorebar
   to match — a plain unscoped class here would silently lose to main.css. */
.ma-header { display:flex; flex-direction:column; gap:0; padding-bottom:0; max-width:1280px; }
#header_content .scorebar .side.ma-side--stack { flex-direction:column; justify-content:center; align-items:center; }
#header_content .scorebar .mid.ma-mid { background:rgba(255,255,255,.04); border-radius:12px; padding:12px;
  border:1px solid rgba(255,255,255,.08); gap:8px; min-width:300px; }
.ma-avg-box { display:flex; align-items:center; gap:8px; font-size:14px; opacity:.85; margin-top:6px;
  background:rgba(255,255,255,.08); padding:6px 12px; border-radius:8px; border:1px solid rgba(255,255,255,.1); }
.ma-avg-label { font-size:13px; opacity:.8; font-weight:600; }
.ma-clan-badge { height:16px; width:16px; object-fit:cover; border-radius:3px; cursor:default; }
.ma-level-icon { height:20px; }
.avg-level-calculated { display:inline-flex; align-items:center; gap:4px; }
.avg-level-calculated .ma-level-icon--calc { display:none; }
.level-text { font-size:13px; opacity:.8; font-weight:600; display:none; }
.ma-elo { margin-left:8px; font-weight:700; font-size:13px; }
.ma-score--l { margin-left:12px; cursor:help; }
.ma-score--r { margin-right:12px; cursor:help; }
.ma-name--right { text-align:right; }
.ma-hub { display:flex; flex-direction:column; align-items:center; gap:8px; }
.ma-hub__org { display:flex; align-items:center; gap:8px; }
.ma-hub__org-avatar { width:24px; height:24px; object-fit:cover; border-radius:4px; }
.ma-hub__org-name { font-weight:600; font-size:18px; color:#fff; }
.ma-hub__details { display:flex; flex-direction:column; align-items:center; gap:2px; }
.ma-hub__name { font-weight:500; font-size:15px; color:#fff; }
.ma-hub__type { font-size:10px; color:#fff; opacity:.7; text-transform:uppercase; }
.match-subnav-tab.ma-hidden-tab { display:none; }


/* ===== match analyser: overview (partial_matchanalyser_overview.html) =====
   .win-prob-bar/.match-date/.match-duration/.custom-tooltip/.party-line keep their
   JS-hook class names; JS sets `.style.*` on them directly (initGlobalMatchData,
   initWinProbabilityBars, initPartyBadges, initMatchDuration) which always wins over
   these CSS defaults, so moving the *initial* look here is safe. */
.ma-overview { display:flex; flex-direction:column; gap:24px; padding-bottom:40px; }
.ma-card--wide { max-width:1280px; margin:0 auto; }
.ma-grid3 { display:grid; grid-template-columns:1fr 360px 1fr; gap:20px; align-items:start; }
.ma-center-col { display:flex; flex-direction:column; gap:16px; }
.ma-mt-8 { margin-top:8px; }

.ma-box { display:flex; flex-direction:column; align-items:center; gap:20px; padding:20px;
  background:rgba(255,255,255,.04); border-radius:12px; border:1px solid rgba(255,255,255,.08); }
.ma-box--live { background:rgba(255,107,0,.06); border-color:rgba(255,107,0,.2); gap:12px; }
.ma-live__head { text-align:center; margin-bottom:8px; }
.ma-live__title { font-size:14px; font-weight:600; color:#ff6b00; margin-bottom:4px; }
.ma-live__subtitle { font-size:12px; opacity:.8; color:rgba(255,255,255,.7); display:none; }

.ma-map-server-row { display:flex; align-items:flex-end; gap:40px; }
.ma-pick-col { display:flex; flex-direction:column; align-items:center; gap:8px; min-width:120px; }
.ma-map-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(50px, 1fr)); gap:6px;
  justify-items:center; max-width:180px; width:100%; }
.ma-map-pick { display:flex; flex-direction:column; align-items:center; gap:4px; text-decoration:none;
  padding:6px; border-radius:8px; transition:all .2s ease; position:relative; width:100%; max-width:60px;
  background:rgba(255,255,255,.08); border:2px solid rgba(255,255,255,.15); }
.ma-map-pick--active { background:rgba(255,107,0,.2); border-color:rgba(255,107,0,.5);
  box-shadow:0 0 8px rgba(255,107,0,.3); }
.ma-map-pick__dot { position:absolute; top:-3px; right:-3px; width:10px; height:10px;
  background:rgba(255,107,0,.9); border:2px solid #fff; border-radius:50%; }
.ma-map-pick__icon { width:28px; height:28px; object-fit:cover; border-radius:4px; filter:brightness(.8); }
.ma-map-pick__icon--active { filter:brightness(1.1) saturate(1.2); }
.ma-map-pick__label { font-weight:600; font-size:8px; color:rgba(255,255,255,.8); text-align:center;
  width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:1.2; }
.ma-map-pick__label--active { color:#fff; }
.ma-tag { font-weight:700; font-size:12px; color:#fff; background:rgba(255,255,255,.08); padding:3px 10px;
  border-radius:16px; border:1px solid rgba(255,255,255,.15); }
.ma-mapnav-foot { text-align:center; margin-top:6px; }
.ma-map-prev { display:flex; align-items:center; justify-content:center; width:24px; height:24px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); border-radius:50%;
  text-decoration:none; transition:all .2s ease; color:#fff; }
.ma-map-prev__icon { margin-left:-1px; }
.ma-icon-50 { width:50px; }
.ma-icon-50--cover { width:50px; object-fit:cover; border-radius:3px; }
.ma-pick-label { font-weight:700; font-size:16px; color:#fff; }
.ma-pick-label--muted { opacity:.7; }
.ma-pick-label--muted-alt { opacity:.6; }

.ma-btn-orange { display:inline-flex; align-items:center; gap:8px; padding:8px 16px;
  background:rgba(255,107,0,.15); color:#ff6b00; border:1px solid rgba(255,107,0,.3); border-radius:8px;
  text-decoration:none; font-size:12px; font-weight:600; transition:all .2s ease; }
.ma-btn-lobby { display:inline-flex; align-items:center; gap:10px; padding:12px 20px;
  background:rgba(255,107,0,.15); color:#ff6b00; border:2px solid rgba(255,107,0,.3); border-radius:10px;
  text-decoration:none; font-size:14px; font-weight:600; transition:all .3s ease;
  box-shadow:0 2px 8px rgba(255,107,0,.1); }

.ma-pill-row { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:12px; }
.ma-pill { padding:4px 10px; border-radius:6px; font-size:11px; font-weight:600; border:1px solid transparent; }
.ma-pill--green  { background:rgba(76,175,80,.15);  color:#9de59d; border-color:rgba(76,175,80,.3); }
.ma-pill--yellow { background:rgba(255,193,7,.15);  color:#ffcc02; border-color:rgba(255,193,7,.3); }
.ma-pill--blue   { background:rgba(33,150,243,.15); color:#64b5f6; border-color:rgba(33,150,243,.3); }
.ma-pill--gray   { background:rgba(158,158,158,.15); color:#bdbdbd; border-color:rgba(158,158,158,.3); }

.ma-row-center-8 { display:flex; align-items:center; justify-content:center; gap:8px; }
.ma-prob-label { font-size:12px; opacity:.7; font-weight:600; min-width:40px; }
.ma-prob-label--r { text-align:right; }
.ma-prob-label--l { text-align:left; }
.win-probability-container { display:flex; width:200px; height:8px; border-radius:4px; overflow:hidden;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.3); }
.win-prob-bar { height:100%; transition:all .3s ease; }
.win-prob-bar.team1 { background:linear-gradient(45deg, rgba(157,229,157,.9), rgba(157,229,157,.7)); }
.win-prob-bar.team2 { background:linear-gradient(45deg, rgba(255,140,140,.9), rgba(255,140,140,.7)); }

.match-timing { display:flex; gap:12px; justify-content:center; font-size:13px; opacity:.8; }
.ma-timing-chip { cursor:help; padding:6px 12px; border-radius:8px; background:rgba(255,255,255,.06);
  transition:all .2s ease; }
.match-duration.ma-timing-chip { position:relative; }
.custom-tooltip { position:absolute; bottom:100%; left:50%; transform:translateX(-50%); margin-bottom:8px;
  padding:8px 12px; background:rgba(0,0,0,.95); color:#fff; border-radius:6px; font-size:12px;
  white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:1000;
  border:1px solid rgba(255,255,255,.2); box-shadow:0 4px 12px rgba(0,0,0,.4); }
.ma-tooltip__title { font-weight:600; margin-bottom:4px; }
.ma-tooltip__arrow { position:absolute; top:100%; left:50%; transform:translateX(-50%);
  border:4px solid transparent; border-top-color:rgba(0,0,0,.95); }

/* ===== match analyser: duels (partial_matchanalyser_duels.html) =====
   Only the static wrapper/header/filter-buttons are componentized here.
   The duels table itself (and its per-cell heat-map colours from
   getDuelCellColor) is built in JS from live data and stays inline —
   that's a data-driven visualization, not decorative duplication. */
.ma-duels-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.ma-duels-title { font-size:20px; font-weight:600; margin:0; }
.ma-duel-filters { display:flex; gap:8px; }
.duel-filter-btn { padding:6px 12px; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.05);
  color:rgba(255,255,255,.7); border-radius:6px; font-size:12px; cursor:pointer; }
.duel-filter-btn.active { background:rgba(255,255,255,.1); color:#fff; }
.ma-duels-loading { text-align:center; padding:40px; opacity:.6; }
.ma-duels-loading__line { margin-bottom:12px; }
.ma-duels-loading__sub { font-size:12px; }

/* ===== match analyser: pick/bans (partial_matchanalyser_pickbans.html) ===== */
.ma-pb-card { padding:20px; display:flex; flex-direction:column; gap:16px; }
.ma-pb-title-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.ma-pb-title { font-size:20px; font-weight:600; }
.ma-pb-subtitle { font-size:12px; opacity:.7; text-transform:uppercase; letter-spacing:.08em; }
.ma-pb-table { width:100%; table-layout:fixed; }
.ma-pb-col-round { width:100px; }
.ma-pb-col-team { width:35%; }
.ma-pb-col-decision { width:120px; }
.ma-pb-tag { display:inline-block; padding:4px 10px; border-radius:var(--r-pill); font-weight:600;
  font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
.ma-pb-tag--pick { background:rgba(76,175,80,.15); color:#9de59d; }
.ma-pb-tag--ban  { background:rgba(244,67,54,.15); color:#f28b82; }
.ma-pb-tag--other { background:rgba(255,255,255,.12); }
.ma-pb-choice { display:flex; align-items:center; gap:8px; }
.ma-pb-icon { width:20px; height:20px; }
.ma-pb-icon--cover { width:20px; height:20px; object-fit:cover; border-radius:3px; }
.ma-pb-random-tag { display:inline-block; padding:2px 8px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.12); font-size:10px; letter-spacing:.08em; text-transform:uppercase; opacity:.85; }
.ma-pb-empty { padding:20px; font-size:14px; opacity:.7; }

/* ===== stat cards (partial_stats.html, /matches + /stats) =====
   Relocated verbatim from that partial's own <style> block — it's included on
   both matches.html and stats.html. (Its :root vars now live in tokens.css;
   the flex/min-height/hover declarations were merged in from main.css's old
   copy of these rules, which this file used to override by source order.) */
/* no vertical margin or padding: this wrapper has no visible box, so anything here is
   just extra gap on top of the .stats_container padding that already spaces sections */
.stats-container-revamp{ margin:0 auto; color:var(--text); }
.stats-grid-revamp{ display:grid; grid-template-columns: repeat(4, 1fr); gap:18px; align-items:stretch; }
.stat-card{ background:linear-gradient(180deg, rgba(15,17,22,.62), rgba(12,14,18,.52)); padding:18px; border-radius:12px; border:1px solid var(--card-border); box-shadow:0 12px 30px rgba(0,0,0,.5); backdrop-filter:blur(6px); display:flex; flex-direction:column; justify-content:space-between; min-height:88px; transition:transform .15s ease, box-shadow .15s ease; }
.stat-card:hover{ transform:translateY(-4px); box-shadow:0 8px 20px rgba(0,0,0,0.45); }
.stat-card__title {font-size: 1.0rem;color:#eaf0f4;margin-bottom: 10px;text-align: center; font-weight: 800; letter-spacing:.2px}
.stat-card__value{ font-size:2.1rem; font-weight:900; color:var(--good); margin-bottom:0; text-align:center }
.stat-card__value.positive{ color:var(--good); }
.stat-card__value.negative{ color:var(--bad); }
/* value + perf inline row */
.stat-card__valueRow{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:12px}

.stat-card__sub{ border-top:1px solid rgba(255,255,255,0.06); padding-top:12px; margin-top:10px; }
.stat-card__sub .sub-row{ display:flex; justify-content:space-between; padding:7px 0; color:var(--muted); font-weight:600 }
.stat-card__sub .sub-row span.value{ color:var(--text); font-weight:700 }

/* Performance indicator (Jira-like chevrons) */
.stat-card__perf{display:flex;justify-content:center;margin:0}
.perf-ind{display:inline-flex;align-items:center;gap:2px;padding:4px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.04)}
.perf-double{flex-direction:column;gap:0}
.perf-ind svg.chev{width:14px;height:14px;stroke-linecap:round;stroke-linejoin:round;stroke-width:2.6;fill:none}
.perf-ind .dash{width:16px;height:2px;border-radius:2px;background:#aab2b9}
.perf-pos1{--perf-color:#9fe06a}
.perf-pos2{--perf-color:#b6f58e}
.perf-neg1{--perf-color:#ff8b6b}
.perf-neg2{--perf-color:#ff6b6b}
.perf-neu{--perf-color:#aab2b9}
.perf-ind svg.chev{stroke:var(--perf-color)}
/* Down chevron uses a downward path; no rotation needed */

/* Winrate donut styles */
.winrate-donut{ position:relative; width:84px; height:84px; }
.winrate-donut-svg{ width:84px; height:84px; display:block; }
.winrate-center{ position:absolute; left:0; right:0; top:0; bottom:0; display:flex; align-items:center; justify-content:center; font-weight:900; color:var(--good); font-size:1.06rem; background:transparent; border-radius:50%; text-shadow: 0 1px 0 rgba(0,0,0,0.6); line-height:1; transform: translateY(5px); }

/* layout for winrate visual */
.winrate-visual{ display:flex; align-items:center; justify-content:center; gap:12px; padding-top:8px; }
.winrate-card .stat-card__sub{ margin-top:14px; }

@media (max-width:1000px){ .stats-grid-revamp{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:600px){ .stats-grid-revamp{ grid-template-columns: 1fr; } }
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ===== segment visualiser toolbar (partial_segment_graph.html) =====
   .viz-toolbar/.toolbar-left/label already exist in main.css and matched these
   inline styles exactly (dead duplication) — only .toolbar-right's base rule
   was actually missing (main.css only had the .segment-tools-right override). */
.toolbar-right { display:flex; align-items:center; gap:10px; margin-left:auto; }
#insightsPicker {
    appearance: none;
    -webkit-appearance: none;
    background: rgba(255,255,255,.08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23cfd6de' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 9px center;
    border: 1px solid rgba(255,255,255,.2);
    color: #eaf0f6;
    padding: 6px 28px 6px 10px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}
#insightsPicker:hover  { background-color: rgba(255,255,255,.13); border-color: rgba(210,105,30,.55); }
#insightsPicker:focus  { outline: none; border-color: rgba(210,105,30,.7); box-shadow: 0 0 0 2px rgba(210,105,30,.15); }
#insightsPicker option { background: #1e2129; color: #eaf0f6; }
#insightsPicker option:checked { background: #2d1a06; color: #ff9f43; }
#advStatsBtn {
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); color: #eaf0f6;
    padding: 6px 12px; border-radius: 10px; backdrop-filter: blur(3px); cursor: pointer;
}
#advStatsBtn:hover { background: rgba(255,255,255,.13) !important; border-color: rgba(210,105,30,.55) !important; }
.segment-viz { margin:14px 0 8px 0; display:none; }
/* main.css's `.chart_background[style]` rule is keyed on the *presence* of a
   style attribute (a pre-existing hack) — replaced here with an explicit class
   so removing the inline style doesn't silently stop that rule from matching. */
.chart_background.ma-chart-fixed { height:300px; width:100%; border-radius:8px; }
.viz-empty-msg { padding:16px; opacity:.8; }
.viz-bar-chart { display:flex; align-items:stretch; gap:8px; height:240px; }
.viz-bar-yaxis { flex:0 0 42px; width:42px; display:flex; flex-direction:column; gap:6px; }
.viz-bar-yaxis-ticks { position:relative; flex:1 1 auto; }
.viz-bar-ytick { position:absolute; right:6px; left:0; transform:translateY(50%); font-size:10px; color:var(--c-subtle); text-align:right; white-space:nowrap; }
.viz-bar-yaxis-spacer { flex:0 0 28px; height:28px; }
.viz-bar-plot { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:6px; }
.viz-bar-bars { position:relative; flex:1 1 auto; display:flex; align-items:flex-end; gap:6px; padding:0 4px; }
.viz-bar-gridline { position:absolute; left:0; right:0; height:1px; background:rgba(255,255,255,.08); }
.viz-bar-wrap { flex:1 1 0; height:100%; display:flex; align-items:flex-end; justify-content:center; position:relative; cursor:pointer; }
.viz-bar { width:100%; min-height:2px; height:0; background:linear-gradient(180deg, #ff9f43, #d2691e); border-radius:3px 3px 0 0; transition:height .7s cubic-bezier(.22,1,.36,1); }
.viz-bar-wrap:hover .viz-bar { filter:brightness(1.35); }
.viz-bar-labels { flex:0 0 28px; height:28px; display:flex; gap:6px; padding:0 4px; }
.viz-bar-labelcell { flex:1 1 0; min-width:0; display:flex; align-items:flex-start; justify-content:center; }
.viz-bar-label { font-size:10px; color:var(--c-subtle); text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.viz-pie-wrap { display:flex; align-items:center; gap:12px; height:300px; }
.viz-pie-svg-holder { flex:1 1 auto; min-width:0; height:100%; }
.viz-pie-legend { flex:0 0 auto; max-width:180px; max-height:100%; overflow-y:auto; display:flex; flex-direction:column; gap:4px; padding-right:2px; }
.viz-pie-legend-row { display:flex; align-items:center; gap:6px; padding:3px 6px; border-radius:6px; cursor:pointer; transition:background-color .15s; }
.viz-pie-legend-row:hover, .viz-pie-legend-row.hl { background:rgba(255,255,255,.08); }
.viz-pie-swatch { width:10px; height:10px; border-radius:3px; flex:0 0 auto; }
.viz-pie-legend-label { flex:1 1 auto; min-width:0; font-size:11px; color:var(--c-subtle); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.viz-pie-legend-pct { flex:0 0 auto; font-size:11px; color:#eaf0f6; font-weight:700; }

/* ===== global stats page (partial_global_stats.html) =====
   Relocated verbatim from that partial's own <style> block. A handful of
   inline style="" attrs in that template are *static* pre-animation baselines
   (e.g. style="left:50%;") — the real per-instance value lives in a data-*
   attribute that JS reads on load and writes to el.style directly (which still
   wins over these defaults), so those baselines are folded in here too.
   Genuinely templated values ({{distribution.median_pos}}, {{r.player.color}},
   etc.) stay inline in the template. */
.gs-page { max-width: 980px; margin: 20px auto 60px; padding: 0 14px; color: #eaf0f4; }

/* Header */
.gs-sample-pill { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.05; }
.gs-sample-pill .n { font-size: 22px; font-weight: 700; color: #fff; font-family: 'Consolas', monospace; text-shadow: 0 2px 8px rgba(0,0,0,.85); }
.gs-sample-pill .l { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: #b7c2cc; text-shadow: 0 1px 4px rgba(0,0,0,.9); }

/* Player search */
.gs-search { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.gs-search-input { flex: 1 1 280px; max-width: 440px; background: #2d2d2d; color: #fff; border: 1px solid #444; border-radius: 8px; padding: 10px 14px; font-size: 14px; }
.gs-search-input:focus { outline: none; border-color: #d2691e; }
.gs-search-btn { appearance: none; background: linear-gradient(180deg, #e8842a, #c25e12); border: none; color: #fff; font-weight: 700; border-radius: 8px; padding: 10px 20px; cursor: pointer; font-size: 14px; }
.gs-search-btn:hover { filter: brightness(1.1); }
.gs-search-clear { color: #9fb0bd; font-size: 13px; text-decoration: none; }
.gs-search-clear:hover { color: #eaf0f4; }

/* Card */
.gs-card { background: linear-gradient(180deg, rgba(15,17,22,.62), rgba(12,14,18,.52)); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.5); backdrop-filter: blur(6px); padding: 18px 20px; margin-bottom: 16px; }
.gs-card-hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.gs-card-title { display: inline-flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 600; }
.gs-card-title .dot { width: 8px; height: 8px; border-radius: 50%; background: #e8842a; box-shadow: 0 0 10px rgba(232,132,42,.8); }
.gs-hd-actions { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gs-lb-btn { appearance: none; background: linear-gradient(180deg, #e8842a, #c25e12); border: none; color: #fff; font-weight: 700; border-radius: 8px; padding: 9px 16px; cursor: pointer; font-size: 13px; white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center; }
.gs-lb-btn:hover { filter: brightness(1.1); color: #fff; }

/* Filter bar */
.gs-filterbar { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.gs-dim { display: flex; flex-direction: column; gap: 6px; }
.gs-dim label { color: #b0b0b0; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; font-weight: 600; }
.gs-select { background: #2d2d2d; color: #fff; border: 1px solid #444; border-radius: 8px; padding: 8px 12px; font-size: 14px; cursor: pointer; min-width: 150px; }
.gs-select:focus { outline: none; border-color: #d2691e; }
.gs-fil-spacer { flex: 1 1 auto; }
.gs-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gs-chips-lbl { color: #7a8a98; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; }
.gs-chip { display: inline-flex; align-items: center; gap: 4px; background: rgba(210,105,30,.22); border: 1px solid rgba(210,105,30,.5); border-radius: 20px; padding: 4px 6px 4px 12px; font-size: 13px; color: #edc; }
.gs-chip b { color: #fff; }
.gs-chip button { background: none; border: none; color: #edc; cursor: pointer; font-size: 15px; line-height: 1; opacity: .7; padding: 0 4px; }
.gs-chip button:hover { opacity: 1; }
.gs-filter-note { margin: 12px 0 0; font-size: 11px; color: #7a8a98; line-height: 1.45; }

/* Histogram */
.gs-hist { position: relative; display: flex; align-items: flex-end; gap: 2px; height: 180px; }
.gs-bar-wrap { flex: 1 1 0; height: 100%; display: flex; align-items: flex-end; position: relative; }
.gs-bar { width: 100%; min-height: 2px; height: 0; background: linear-gradient(180deg, #e8842a, #8a3d12); border-radius: 3px 3px 0 0; transition: height .7s cubic-bezier(.22,1,.36,1); }
.gs-bar-wrap:hover .gs-bar { filter: brightness(1.35); }
.gs-bar-tip { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 6px; background: #0b0f14; border: 1px solid rgba(255,255,255,.12); border-radius: 6px; padding: 4px 8px; font-size: 11px; white-space: nowrap; color: #eaf0f4; opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 5; }
.gs-bar-tip .c { color: #e8842a; font-weight: 700; }
.gs-bar-wrap:hover .gs-bar-tip { opacity: 1; }
.gs-median { position: absolute; top: 0; bottom: 0; width: 2px; background: repeating-linear-gradient(180deg, #60c890 0 5px, transparent 5px 10px); transform: translateX(-1px); pointer-events: none; }
.gs-median-flag { position: absolute; top: -3px; left: 5px; font-size: 10px; color: #9bd98a; white-space: nowrap; background: rgba(11,15,20,.78); padding: 2px 7px; border-radius: 999px; border: 1px solid rgba(96,200,144,.5); }
.gs-median-flag span { color: #eafff1; font-weight: 700; }
.gs-hist-you { position: absolute; top: 0; bottom: 0; width: 2px; background: repeating-linear-gradient(180deg, #f59433 0 5px, transparent 5px 10px); transform: translateX(-1px); pointer-events: none; z-index: 4; }
.gs-hist-you-flag { position: absolute; top: 18px; left: 5px; font-size: 10px; color: #f3b27a; white-space: nowrap; background: rgba(11,15,20,.78); padding: 2px 7px; border-radius: 999px; border: 1px solid rgba(245,148,51,.55); }
.gs-hist-you-flag span { color: #fff; font-weight: 700; }
.gs-hist-axis { display: flex; justify-content: space-between; align-items: baseline; margin-top: 10px; color: #7a8a98; font-size: 12px; font-family: 'Consolas', monospace; }
.gs-axis-mid { color: #b0b0b0; font-family: inherit; }
.gs-axis-mid b { color: #eaf0f4; }
.gs-hist-empty { display: flex; align-items: center; justify-content: center; min-height: 140px; text-align: center; color: #7a8a98; font-size: 14px; }

/* Population ranges */
.gs-ranges-grid { display: flex; flex-direction: column; }
.gs-range-row { display: flex; flex-direction: column; gap: 8px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
.gs-range-row:first-child { padding-top: 2px; }
.gs-range-row:last-child { padding-bottom: 0; border-bottom: none; }
.gs-range-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 22px; }
.gs-range-label { font-weight: 600; font-size: 14px; }
.gs-range-track { position: relative; height: 14px; }
.gs-range-base { position: absolute; top: 50%; left: 0; right: 0; height: 4px; transform: translateY(-50%); background: rgba(255,255,255,.08); border-radius: 999px; }
.gs-range-band { position: absolute; top: 50%; height: 6px; left: 50%; right: 50%; transform: translateY(-50%); background: linear-gradient(90deg, #e07070 0%, #e0c060 50%, #60c890 100%); border-radius: 999px; transition: left .7s ease, right .7s ease; }
.gs-range-band.rev { background: linear-gradient(90deg, #60c890 0%, #e0c060 50%, #e07070 100%); }
.gs-range-tick { position: absolute; top: 50%; width: 3px; height: 14px; left: 50%; transform: translate(-50%,-50%); background: #e0c060; border-radius: 2px; transition: left .7s ease; }
.gs-you-pin { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; transition: left .7s ease; z-index: 3; }
.gs-you-dot { display: block; width: 13px; height: 13px; border-radius: 50%; background: #9fb0bd; border: 2px solid #0b0f14; box-shadow: 0 0 0 1px rgba(255,255,255,.35); }
.gs-you-tip { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 6px; background: #0b0f14; border: 1px solid rgba(255,255,255,.14); border-radius: 6px; padding: 4px 9px; font-size: 12px; font-weight: 700; white-space: nowrap; color: #eaf0f4; opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 8; }
.gs-you-pin:hover .gs-you-tip { opacity: 1; }
.gs-range-youline { position: relative; height: 15px; }
.gs-you-val { position: absolute; top: 0; left: 50%; transform: translateX(-50%); white-space: nowrap; font-family: 'Consolas', monospace; font-size: 12px; font-weight: 700; transition: left .7s ease; }
.gs-range-ends { position: relative; height: 16px; font-family: 'Consolas', monospace; font-size: 12px; }
.gs-range-ends > span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.gs-range-q20 { color: #e07070; left: 15%; }
.gs-range-medlabel { color: #e0c060; }
.gs-range-q80 { color: #60c890; left: 85%; }
.gs-range-ends.rev .gs-range-q20 { color: #60c890; }
.gs-range-ends.rev .gs-range-q80 { color: #e07070; }
.gs-range-cap { color: #7a8a98; font-size: 10px; text-transform: uppercase; }

/* Identity strip */
.gs-idstrip { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: #9fb0bd; }
.gs-idstrip .av { width: 26px; height: 26px; border-radius: 6px; object-fit: cover; border: 1px solid rgba(255,255,255,.12); }
.gs-idstrip b { color: #eaf0f4; }
.gs-idstrip.ln { color: #e8842a; text-decoration: none; font-weight: 600; }
.gs-idstrip.ln:hover { text-decoration: underline; }

.gs-empty-card { text-align: center; color: #7a8a98; font-size: 14px; padding: 30px 12px; }
.gs-foot { text-align: center; color: #7a8a98; font-size: 13px; margin-top: 4px; }

@media (max-width: 720px) {
    .gs-hist { height: 150px; }
}

/* Mini-game leaderboard — shared by every game registered in MINIGAMES */
.mg-lb{margin-top:16px; border-radius:14px; border:1px solid rgba(255,255,255,.08); background:rgba(0,0,0,.22); overflow:hidden}
.mg-lb-tabs{display:flex; gap:2px; padding:6px; background:rgba(255,255,255,.03)}
.mg-lb-tab{flex:1 1 0; padding:8px 10px; border:0; border-radius:8px; background:transparent; color:#aab4be; font-weight:700; font-size:13px; cursor:pointer}
.mg-lb-tab:hover{color:#fff; background:rgba(255,255,255,.06)}
.mg-lb-tab.is-active{background:#ff5500; color:#fff}
.mg-lb-empty{padding:22px 16px; text-align:center; color:#8e99a4; font-size:14px}
.mg-lb-table{width:100%; border-collapse:collapse}
.mg-lb-row{border-top:1px solid rgba(255,255,255,.05)}
.mg-lb-row.is-me{background:rgba(255,85,0,.12)}
.mg-lb-row td{padding:8px 12px; vertical-align:middle}
.mg-lb-rank{width:44px; text-align:center; font-weight:900; color:#8e99a4}
.mg-lb-rank.is-top1{color:#ffcc33}
.mg-lb-rank.is-top2{color:#d6dde4}
.mg-lb-rank.is-top3{color:#e0a06a}
.mg-lb-player{display:flex; align-items:center; gap:10px}
.mg-lb-avatar{width:28px; height:28px; border-radius:50%; object-fit:cover; background:rgba(255,255,255,.06)}
.mg-lb-avatar--none{display:inline-block}
.mg-lb-name{color:#fff; font-weight:700; text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:180px}
.mg-lb-name:hover{color:#ff5500}
.mg-lb-rounds{text-align:right; color:#8e99a4; font-size:12px; white-space:nowrap}
.mg-lb-score{text-align:right; font-weight:900; color:#fff; white-space:nowrap}
.mg-lb-score span{font-weight:600; font-size:11px; color:#8e99a4}
.mg-lb-me-row{display:flex; align-items:center; gap:12px; padding:10px 12px; border-top:2px solid rgba(255,85,0,.35); background:rgba(255,85,0,.1)}
.mg-lb-me-row .mg-lb-score{margin-left:auto}

/* Leaderboard call-to-action shown under a finished mini-game run */
.mg-lb-cta{margin-top:16px; padding:16px; border-radius:14px; text-align:center; background:rgba(255,85,0,.1); border:1px solid rgba(255,85,0,.3)}
.mg-lb-cta--muted{background:rgba(255,255,255,.03); border-color:rgba(255,255,255,.08)}
.mg-lb-cta-title{font-weight:900; color:#fff; font-size:1.05rem}
.mg-lb-cta-title i{color:#ffcc33; margin-right:6px}
.mg-lb-cta-sub{margin:6px 0 12px; color:#c9d2da; font-size:13px}
/* the board sits below the game stage and stays visible whether or not a round was played */
.mg-lb-wrap{margin-top:20px}

/* One width for every mini-game: the stage, its start card and its board all line up */
.mg-wrap{max-width:880px; margin:0 auto; padding:0 8px}

/* Mini-game start screen — shared landing card, on the usual game stage background */
.mg-start{text-align:center; padding:30px 22px 26px}
.mg-start-blurb{margin:0 auto 18px; max-width:440px; color:#c9d2da; font-size:14px; line-height:1.55}
.mg-start-rules{display:flex; flex-direction:column; gap:8px; max-width:400px; margin:0 auto 20px; text-align:left}
.mg-start-rule{display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:10px; background:rgba(255,255,255,.03);
               border:1px solid rgba(255,255,255,.07); color:#c9d2da; font-size:13px}
.mg-start-rule i{color:#ff5500; width:16px; text-align:center}
.mg-start-played{margin:0 auto 18px; padding:14px; max-width:400px; border-radius:12px;
                 background:rgba(57,217,138,.09); border:1px solid rgba(57,217,138,.28)}
.mg-start-played-title{font-weight:900; color:#fff; font-size:.98rem}
.mg-start-played-title i{color:#39d98a; margin-right:6px}
.mg-start-played-score{margin:8px 0 4px; font-size:2rem; font-weight:900; color:#fff; line-height:1}
.mg-start-played-score span{font-size:.85rem; color:#8e99a4; font-weight:700}
.mg-start-played-rank{display:inline-block; margin-left:8px; padding:3px 10px; border-radius:999px; font-size:.7rem;
                      background:rgba(255,255,255,.08); color:#cfd6dd; vertical-align:middle}
.mg-start-played-sub{margin:6px 0 0; color:#c9d2da; font-size:12.5px}
.mg-start-actions{display:flex; flex-wrap:wrap; justify-content:center; gap:10px}
.mg-start-play{font-size:1.05rem; padding:13px 34px}
.mg-start-replay span{opacity:.7; font-weight:600}
.mg-start-board{background:rgba(255,255,255,.08)}
@media (max-width:560px){
    .mg-start-actions .ps-btn{width:100%}
}

/* End-card actions: the player's own result actions, kept apart from the
   cross-links so "try our other mini games" reads as a label, not a button */
.mg-end-actions{display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:12px}
.mg-more{margin-top:18px; padding-top:16px; border-top:1px solid rgba(255,255,255,.08); text-align:center}
.mg-more-label{margin-bottom:10px; color:#8e99a4; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.5px}
.mg-more-grid{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px}
.mg-more-card{--mg-accent:#ff5500; --mg-soft:rgba(255,85,0,.14); display:flex; flex-direction:column; align-items:center; gap:3px; padding:14px 8px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.08); background:linear-gradient(180deg, var(--mg-soft), rgba(0,0,0,.22) 70%); text-decoration:none; transition:transform .15s ease, border-color .15s ease}
.mg-more-card:hover{transform:translateY(-2px); border-color:var(--mg-accent)}
.mg-more-card--guesser{--mg-accent:#ff5500; --mg-soft:rgba(255,85,0,.14)}
.mg-more-card--grid{--mg-accent:#2fbf71; --mg-soft:rgba(47,191,113,.14)}
.mg-more-card--career{--mg-accent:#b07cff; --mg-soft:rgba(176,124,255,.14)}
.mg-more-card--trivia{--mg-accent:#ffcc33; --mg-soft:rgba(255,204,51,.12)}
.mg-more-icon{display:flex; align-items:center; justify-content:center; width:38px; height:38px; margin-bottom:6px; border-radius:10px; background:var(--mg-soft); border:1px solid var(--mg-accent); color:var(--mg-accent); font-size:18px}
.mg-more-name{color:#fff; font-weight:800; font-size:14px; line-height:1.2}
.mg-more-tag{color:#aab4be; font-size:12px; line-height:1.3; text-align:center}
.mg-more-pros{margin-top:10px; text-align:right}
.mg-end-score{margin:12px 0 6px; font-size:3.6rem; font-weight:900; color:#fff; line-height:1}
.mg-end-score span{font-size:1rem; color:#8e99a4; font-weight:700}
.mg-share-btn{min-width:120px}
@media (max-width:600px){
    .mg-end-score{font-size:2.6rem}
    .mg-more-grid{grid-template-columns:1fr}
    .mg-more-card{flex-direction:row; flex-wrap:wrap; column-gap:12px; padding:10px 12px}
    .mg-more-icon{margin-bottom:0}
    .mg-more-tag{text-align:left}
}