/* stats.css — page styles for stats.php (moved out of the page so browsers cache them). */
/* search */
.search-wrap{padding:32px 0 24px}
.search-box{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap}
.search-input-wrap{position:relative;flex:1;min-width:200px}
.search-input{width:100%;padding:.8rem 1rem;border-radius:var(--radius-sm);border:1px solid rgba(255,255,255,.1);
              background:rgba(10,17,32,.85);color:var(--fg);font-size:1rem;font-family:inherit;outline:none;transition:border-color .15s;box-sizing:border-box}
.search-input:focus{border-color:rgba(50,167,235,.5)}
.search-ac-list{display:none;position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:200;
  background:#0d1520;border:1px solid rgba(50,167,235,.5);border-radius:var(--radius-sm);
  max-height:220px;overflow-y:auto;box-shadow:0 8px 24px rgba(0,0,0,.5);list-style:none;margin:0;padding:0}
.search-ac-list.open{display:block}
.search-ac-item{padding:.55rem 1rem;font-size:.9rem;color:var(--fg);cursor:pointer;
  border-bottom:1px solid rgba(255,255,255,.04)}
.search-ac-item:last-child{border-bottom:none}
.search-ac-item:hover,.search-ac-item.active{background:rgba(50,167,235,.15);color:#fff}
.search-ac-item mark{background:none;color:#32a7eb;font-weight:700}
.search-ac-empty{padding:.6rem 1rem;font-size:.82rem;color:var(--muted);font-style:italic}
.recent-searches{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.recent-chip{display:inline-flex;align-items:center;gap:5px;font-size:.78rem;padding:.25rem .6rem;
             border-radius:.4rem;background:rgba(255,255,255,.06);
             border:1px solid var(--border);color:var(--muted);cursor:pointer;text-decoration:none;
             transition:all .15s;position:relative;user-select:none;-webkit-user-select:none}
.recent-chip:hover{color:var(--fg);background:rgba(255,255,255,.1)}
.recent-chip-del{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;
                 border-radius:50%;font-size:.65rem;line-height:1;color:inherit;opacity:.5;
                 cursor:pointer;background:none;border:none;padding:0;transition:opacity .12s,background .12s;flex-shrink:0;
                 position:relative;z-index:1}
.recent-chip-del:hover{opacity:1;background:rgba(255,255,255,.15)}

/* breadcrumb */
.breadcrumb{display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--muted);margin-bottom:18px}
.breadcrumb a{color:var(--muted);text-decoration:none}.breadcrumb a:hover{color:var(--fg)}
.breadcrumb .sep{opacity:.4}

/* profile card */
.profile-card{padding:22px 24px;margin-bottom:6px}
.profile-top{display:flex;align-items:stretch;justify-content:space-between;gap:16px;flex-wrap:wrap}
/* Hero right-hand column (tier badges + Steam playtime + grade). margin-left:auto
   keeps it on the card's right edge on desktop; min-width:0 lets it shrink instead
   of overflowing when a member holds two wide tier pills. */
.profile-hero-side{margin-left:auto;min-width:0;max-width:100%}
/* Phones: the row wraps, and a right-pinned column under a left-aligned avatar read
   as lopsided. Instead the avatar + name pair centres as one unit (the text stays
   left-aligned beside the avatar), and the badges and stats centre beneath it.
   The !importants beat the desktop layout's inline alignment styles. */
@media (max-width:640px){
  .profile-id{flex:1 1 100%;justify-content:center}
  .profile-id-text{min-width:0}
  /* Beside an 88px avatar a 13–16 character name at full size breaks mid-word;
     scaled down it fits whole. anywhere is only the last resort. */
  .profile-id .profile-name{overflow-wrap:anywhere}
  .profile-id .profile-name--long{font-size:1.15rem}
  #player-avatar{width:88px!important;height:88px!important}
  #hero-tier-img{width:34px!important;height:34px!important}
  .profile-hero-side{flex:1 1 100%;align-items:center!important}
  #hero-badge-wrap{justify-content:center!important}
  .profile-metrics{align-self:stretch;justify-content:center!important}
  #steam-strip{align-items:center!important}
  #steam-strip > div > div,#steam-strip-unconfirmed{text-align:center!important}
  #steam-strip-hours,#steam-strip-recent{font-size:1.125rem!important}
  /* Hairline over the stats row, only when a stat sits under it. The playtime strip
     and grade are shown/hidden by inline display from several places in the JS, so
     this reads that state rather than relying on every caller to set a class. */
  .profile-metrics:has(#steam-strip:not([style*="display:none"]):not([style*="display: none"]),
                       #hero-grade-wrap:not([style*="display:none"]):not([style*="display: none"])){
    margin-top:6px;padding-top:16px;border-top:1px solid var(--border)
  }
}
.profile-name{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:800;letter-spacing:-.02em;margin:0 0 6px}
.profile-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tier-badge{display:inline-flex;align-items:center;gap:5px;font-size:.75rem;font-weight:700;padding:.3rem .65rem;
            border-radius:.4rem;text-transform:uppercase;letter-spacing:.06em}
.tier-bronze{background:rgba(180,100,40,.18);border:1px solid rgba(180,100,40,.4);color:#d4855a}
.tier-silver{background:rgba(160,160,170,.12);border:1px solid rgba(160,160,170,.3);color:#b0b3ba}
.tier-gold{background:rgba(210,170,40,.15);border:1px solid rgba(210,170,40,.35);color:#d4b84a}
.tier-platinum{background:rgba(60,200,180,.12);border:1px solid rgba(60,200,180,.3);color:#3ec8b4}
.tier-diamond{background:rgba(50,167,235,.12);border:1px solid rgba(50,167,235,.3);color:#32a7eb}
.tier-master{background:rgba(160,80,235,.15);border:1px solid rgba(160,80,235,.3);color:#a050eb}
/* Wolf Grounds skill grade — bold report-card style. Distinct SHAPE from the round
   ranked-tier icon (this is a filled square-ish plate) so the two never get confused.
   Each grade carries its own accent colour (S=purple … F=orange). */
.hero-grade{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
            width:46px;height:46px;border-radius:11px;flex-shrink:0;line-height:1;
            box-shadow:0 2px 10px rgba(0,0,0,.35);cursor:default;
            background:var(--g-bg);border:1.5px solid var(--g-accent)}
.hero-grade .hg-letter{font-size:1.4rem;font-weight:900;color:var(--g-accent);
            text-shadow:0 0 12px var(--g-glow)}
/* inline in the metric row the caption below carries the label, so the on-plate
   mini-label is redundant — hide it. */
.hero-grade .hg-label{display:none}
/* Solo: when the grade is the only thing in the hero corner (no Steam playtime),
   scale it up so it reads as a proper feature instead of a small stranded chip. */
.hero-grade--solo{width:68px;height:68px;border-radius:15px;border-width:2px}
.hero-grade--solo .hg-letter{font-size:2.1rem}
/* per-grade colour tokens */
.hg-S{--g-accent:#c07bff;--g-bg:rgba(160,80,235,.16);--g-glow:rgba(160,80,235,.55)}
.hg-A{--g-accent:#4fb8ff;--g-bg:rgba(50,167,235,.14);--g-glow:rgba(50,167,235,.5)}
.hg-B{--g-accent:#3ed6c0;--g-bg:rgba(60,200,180,.14);--g-glow:rgba(60,200,180,.45)}
.hg-C{--g-accent:#e6c34a;--g-bg:rgba(210,170,40,.16);--g-glow:rgba(210,170,40,.4)}
.hg-D{--g-accent:#b8bcc6;--g-bg:rgba(160,160,170,.13);--g-glow:rgba(160,160,170,.35)}
.hg-F{--g-accent:#e08a5a;--g-bg:rgba(180,100,40,.18);--g-glow:rgba(180,100,40,.4)}
.profile-quick{display:flex;gap:20px;flex-wrap:wrap;margin-top:14px}
.quick-stat{text-align:center}
.quick-stat .qs-val{font-size:1.6rem;font-weight:800;color:var(--brand);line-height:1}
.quick-stat .qs-label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-top:3px}
.profile-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}

/* steam tab */
.steam-ach-list{display:flex;flex-direction:column;gap:8px}
.steam-ach{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-sm);transition:background .12s}
.steam-ach:hover{background:#0f1a2a}
.steam-ach img{width:36px;height:36px;border-radius:var(--radius-xs);border:1px solid var(--border);flex-shrink:0}
.steam-ach-info{min-width:0}
.steam-ach-info{flex:1;min-width:0}
.steam-ach-info .ach-name{font-size:.88rem;font-weight:700;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.steam-ach-info .ach-desc{font-size:.76rem;color:var(--muted);margin-top:2px}
.steam-ach-info .ach-unlock-date{font-size:.7rem;color:var(--muted);margin-top:3px;opacity:.7}
.ach-rarity{flex-shrink:0;font-size:.7rem;font-weight:700;padding:.18rem .5rem;border-radius:999px;white-space:nowrap}
.ach-rarity--rare{background:rgba(167,139,250,.15);border:1px solid rgba(167,139,250,.35);color:#a78bfa}
.ach-rarity--uncommon{background:rgba(52,211,153,.12);border:1px solid rgba(52,211,153,.3);color:#34d399}
.ach-rarity--common{background:rgba(255,255,255,.06);border:1px solid var(--border);color:var(--muted)}
.ach-rarity--locked{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);color:var(--muted)}
.steam-ach--locked{opacity:.6;border-color:rgba(255,255,255,.04)}
.steam-link-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.steam-link-row input{flex:1;min-width:180px;padding:.45rem .7rem;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-xs);color:var(--fg);font-size:.85rem;font-family:inherit}
.steam-link-row input:focus{outline:none;border-color:var(--brand-dim)}
.steam-link-row input::placeholder{color:var(--muted)}

/* tabs */
.tabs-bar{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:20px;padding-bottom:0}
.tab-btn{padding:.55rem .9rem;border-radius:.4rem;font-size:.84rem;font-weight:700;cursor:pointer;
         background:none;border:1px solid rgba(255,255,255,.25);color:var(--muted);
         transition:color .15s,background .15s,border-color .15s}
.tab-btn:hover{color:var(--fg);background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.45)}
.tab-btn.active{color:var(--fg);background:var(--bg2);border-color:rgba(255,255,255,.85)}
.tab-btn--steam{display:inline-flex!important;align-items:center;gap:5px}
.tab-panel{display:none}.tab-panel.active{display:block}
.weapon-sub-tabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
/* nowrap + no-shrink: without these the 6 lifetime mode tabs (Squad FPP … Solo
   TPP) get compressed on a phone until their labels break onto two lines and the
   last one is clipped off the right edge. Wrapping the row keeps every tab full
   size and reachable. */
.wsub-btn{padding:.4rem .85rem;border-radius:.4rem;font-size:.82rem;font-weight:700;cursor:pointer;background:none;border:1px solid var(--border);color:var(--muted);white-space:nowrap;flex-shrink:0;transition:color .15s,background .15s}
.wsub-btn:hover{color:var(--fg);background:rgba(255,255,255,.05)}
.wsub-btn.active{color:var(--fg);background:var(--bg2);border-color:var(--brand)}

/* season selector */
.season-select-wrap{position:relative;display:flex;align-items:center}
.season-select{appearance:none;background:var(--bg2);border:1px solid var(--border);border-radius:.4rem;color:var(--fg);font-size:.84rem;font-weight:700;font-family:inherit;padding:.55rem 2rem .55rem .9rem;cursor:pointer;min-width:150px;transition:border-color .15s,color .15s}
.season-select:hover,.season-select:focus{border-color:rgba(255,255,255,.45);color:var(--fg);outline:none}
.season-select-wrap::after{content:'▾';position:absolute;right:.7rem;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--muted);font-size:.75rem}
/* Phone: drop the season dropdown onto its own row below the wrapped tab
   buttons, with a gap — otherwise it sits flush against the "Steam" tab. */
@media (max-width:640px){
  #seasonal-header{flex-basis:100%;margin-top:12px}
}

/* stats grid */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
/* Phone: don't let the cards stretch edge-to-edge — cap the columns and centre
   the whole grid in its panel, and pull a lone trailing card in under the pair
   above instead of leaving it stranded in the left column. Desktop is untouched. */
@media (max-width:480px){
  .stats-grid{grid-template-columns:repeat(2,minmax(0,150px));justify-content:center}
  .stats-grid > .stat-pill:last-child:nth-child(odd){grid-column:1 / -1;width:150px;justify-self:center}
}
.stat-pill{background:#0a1120;border:1px solid #1b2840;border-radius:.7rem;padding:14px 16px;text-align:center}
.stat-pill .label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.stat-pill .val{font-size:1.45rem;font-weight:800;margin-top:.25rem;color:var(--fg)}
.stat-pill .pct{font-size:.68rem;font-weight:700;margin-top:.2rem;color:var(--muted)}
.stat-pill .pct--fire{color:var(--brand)}
.stat-pill .pct--trophy{color:#f59e0b}
.stat-pill--trophy{border-color:rgba(245,158,11,.45)!important;background:rgba(245,158,11,.07)!important}
.stat-pill--trophy .val{color:#f59e0b}
.stat-pill.highlight{border-color:var(--highlight-border);background:var(--highlight-bg)}

/* Server-rendered career summary (see the .ssr-career section markup, below the
   tab panels). This is reference material sitting at the foot of the page, not a
   headline — it is styled quiet on purpose so it reads as a footnote to the
   tabs rather than competing with the profile card, which is where it first
   shipped and where it was far too loud. */
/* Sits in a .glass panel like every other block on the page — as bare text on the
   page background it read as something left behind rather than part of the layout.
   The panel supplies the separation the old border-top was doing, and the quiet
   comes from the muted type below rather than a blanket opacity, which dimmed the
   container along with the text. */
.ssr-career{margin-top:34px;padding:20px 22px}
.ssr-career h2{margin:0 0 10px;font-size:.7rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;color:var(--muted)}
/* The headline numbers render as pills for sighted readers, but the prose sentence
   stays in the DOM for screen readers and crawlers — it is the natural-language text
   that matches long-tail queries ("career K/D", "win rate"), which a grid of isolated
   figures does not. Same numbers, same order, both in the markup: the pills carry
   aria-hidden so a screen reader hears the sentence once rather than twice. */
.ssr-career-lede-sr{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.ssr-career-pills{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:10px}
.ssr-pill{background:#0a1120;border:1px solid #1b2840;border-radius:.6rem;padding:11px 13px}
.ssr-pill .l{font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.ssr-pill .v{font-size:1.2rem;font-weight:800;color:var(--fg);margin-top:3px;font-variant-numeric:tabular-nums}
.ssr-pill--hl{background:var(--highlight-bg);border-color:var(--highlight-border)}
.ssr-pill--hl .v{color:var(--highlight)}
/* The table is the widest thing here; scroll it inside its own box so a narrow
   phone never gets a horizontally scrolling page body. */
.ssr-career-tablewrap{margin-top:14px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.ssr-career-table{width:100%;border-collapse:collapse;font-size:.8rem;min-width:520px}
/* The caption repeats the h2 for screen readers landing on the table directly;
   visually redundant there, so it is clipped rather than displayed. */
.ssr-career-table caption{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.ssr-career-table th,.ssr-career-table td{padding:7px 10px;text-align:right;
  border-bottom:1px solid var(--border);white-space:nowrap}
.ssr-career-table thead th{font-size:.66rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--muted)}
/* Every other column is numeric and right-aligned, but the Mode column holds the
   row headers, which are left-aligned — so its column header has to be too, or it
   floats off over the wrong edge of the names beneath it. */
.ssr-career-table thead th:first-child{text-align:left}
.ssr-career-table th[scope=row]{text-align:left;font-weight:700;color:var(--fg)}
.ssr-career-table tbody tr:last-child th,.ssr-career-table tbody tr:last-child td{border-bottom:0}
.ssr-career-note{margin:10px 0 0;font-size:.7rem;color:var(--muted);opacity:.8}
@media (max-width:640px){
  .ssr-career{margin-top:26px;padding:16px}
  .ssr-career-pills{grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px}
  .ssr-pill{padding:9px 11px}
  .ssr-pill .v{font-size:1.05rem}
}
.stat-pill.highlight .val{color:var(--highlight)}
.stat-pill--muted{opacity:.4}

/* milestones */
.milestone-panel{margin-top:18px;padding:16px 18px;background:var(--glass);border:1px solid var(--border);border-radius:var(--radius)}
.milestone-panel-title{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--fg2);margin-bottom:12px}
.milestone-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.milestone-row:last-of-type{margin-bottom:0}
.milestone-row-label{font-size:.78rem;font-weight:700;color:var(--fg2);min-width:68px;flex-shrink:0}
.ms-badge{display:inline-flex;align-items:center;gap:4px;padding:.25rem .6rem;border-radius:.4rem;border:1px solid var(--border);background:var(--glass);font-size:.78rem;font-weight:800;color:var(--muted);opacity:.6;white-space:nowrap}
.ms-badge.achieved{background:rgba(50,167,235,.18);border-color:rgba(50,167,235,.5);color:var(--brand);opacity:1}
.ms-badge.next{background:rgba(50,167,235,.12);border:2px solid var(--brand);color:#fff;opacity:1;animation:ms-pulse 2s ease-in-out infinite}
@keyframes ms-pulse{0%,100%{box-shadow:0 0 0 0 rgba(50,167,235,.0)}50%{box-shadow:0 0 0 4px rgba(50,167,235,.25)}}
.milestone-totals{font-size:.72rem;color:var(--muted);margin-top:10px}

/* kd trend chart */
.kd-trend-panel{margin-top:18px;padding:16px 18px;background:var(--glass);border:1px solid var(--border);border-radius:var(--radius)}
.kd-trend-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.kd-trend-title{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--fg2)}
.kd-trend-pill{font-size:.65rem;font-weight:700;padding:.2rem .6rem;border-radius:.35rem;background:rgba(50,167,235,.12);border:1px solid rgba(50,167,235,.3);color:var(--brand)}
.kd-trend-svg{width:100%;height:140px;overflow:visible;display:block}
.kd-trend-empty{font-size:.8rem;color:var(--muted);text-align:center;padding:28px 0}

/* play calendar */
.play-calendar-section{margin-top:14px}
.play-calendar-glass{background:var(--glass);border:1px solid var(--border);border-radius:var(--radius);padding:20px 24px;display:flex;gap:0;align-items:flex-start;flex-wrap:wrap}
.play-cal-left{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;padding-right:28px}
.play-cal-right{flex:1 1 0;min-width:0;border-left:1px solid var(--border);padding-left:28px}
@media(max-width:640px){.play-calendar-glass{flex-direction:column}.play-cal-left{padding-right:0}.play-cal-right{border-left:none;border-top:1px solid var(--border);padding-left:0;padding-top:16px;width:100%}}
.play-cal-title{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--fg2);margin-bottom:12px;align-self:flex-start}
.play-cal-wrap{width:100%}
.play-cal-inner-grid{display:grid;gap:3px;width:100%}
.play-cal-month-label{font-size:.6rem;color:var(--muted);font-weight:600;text-align:left;overflow:hidden;white-space:nowrap}
.play-cal-day-label{font-size:.55rem;color:var(--muted);display:flex;align-items:center;justify-content:flex-end;padding-right:3px}
.play-cal-day{border-radius:2px;cursor:default;transition:opacity .15s,transform .1s;aspect-ratio:1}
.play-cal-day[data-count="0"]{background:rgba(255,255,255,.05)}
.play-cal-day[data-count="1"]{background:rgba(50,167,235,.18)}
.play-cal-day[data-count="2"]{background:rgba(50,167,235,.38)}
.play-cal-day[data-count="3"]{background:rgba(50,167,235,.62)}
.play-cal-day[data-count="4"]{background:var(--brand)}
.play-cal-day[data-win="1"]{outline:2px solid #f0c040;outline-offset:-2px}
.play-cal-day:not([data-count="0"]){cursor:pointer}
.play-cal-day:hover{opacity:.7;transform:scale(1.15)}
.play-cal-legend{display:flex;align-items:center;gap:6px;margin-top:10px;font-size:.62rem;color:var(--muted);align-self:flex-start;flex-wrap:wrap}
.play-cal-leg-swatch{width:10px;height:10px;border-radius:2px;flex-shrink:0}
.play-cal-leg-sep{width:1px;align-self:stretch;background:var(--border);margin:0 4px}
#play-cal-tooltip{position:fixed;pointer-events:none;z-index:9999;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:6px 10px;font-size:.72rem;color:var(--fg);white-space:nowrap;box-shadow:0 4px 18px rgba(0,0,0,.5);display:none}
.history-date-filter{display:flex;align-items:center;gap:10px;font-size:.8rem;color:var(--fg2);background:rgba(50,167,235,.08);border:1px solid rgba(50,167,235,.2);border-radius:.5rem;padding:8px 14px;margin-bottom:12px}
.history-date-filter button{background:none;border:none;color:var(--brand);font-weight:700;cursor:pointer;font-family:inherit;font-size:.78rem;text-decoration:underline;padding:0}
/* milestone redesign — right column */
#play-cal-milestones .milestone-panel,
#ranked-cal-milestones .milestone-panel{background:transparent;border:none;border-radius:0;margin-top:0;padding:0}
.ms2-title{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--fg2);margin-bottom:16px}
.ms2-category{margin-bottom:18px}
.ms2-category:last-of-type{margin-bottom:0}
.ms2-cat-header{display:flex;align-items:baseline;gap:8px;margin-bottom:8px}
.ms2-cat-icon{font-size:.95rem;line-height:1}
.ms2-cat-label{font-size:.72rem;font-weight:700;color:var(--fg2);text-transform:uppercase;letter-spacing:.06em}
.ms2-cat-count{font-size:1.25rem;font-weight:800;color:var(--brand);line-height:1;margin-left:auto}
.ms2-progress-wrap{height:5px;border-radius:3px;background:rgba(255,255,255,.07);margin-bottom:8px;overflow:hidden}
.ms2-progress-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,rgba(50,167,235,.6),var(--brand));transition:width .6s ease}
.ms2-badges{display:flex;flex-wrap:wrap;gap:5px}
.ms2-badge{display:inline-flex;align-items:center;gap:3px;padding:.18rem .5rem;border-radius:.35rem;font-size:.72rem;font-weight:800;white-space:nowrap;border:1px solid transparent}
.ms2-badge--done{background:rgba(50,167,235,.14);border-color:rgba(50,167,235,.35);color:var(--brand)}
.ms2-badge--next{background:rgba(50,167,235,.1);border:2px solid var(--brand);color:#fff;animation:ms-pulse 2s ease-in-out infinite}
.ms2-badge--future{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08);color:var(--muted);opacity:.55}
.ms2-away{font-size:.65rem;color:var(--muted);margin-top:7px}

/* mode tabs */
.mode-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}
.mode-tab{padding:.3rem .7rem;border-radius:.4rem;font-size:.8rem;font-weight:700;text-decoration:none;
          color:var(--muted);border:1px solid transparent;transition:all .15s}
.mode-tab:hover{color:var(--fg);background:rgba(255,255,255,.07)}
.mode-tab.active{color:var(--brand);border-color:rgba(50,167,235,.35);background:rgba(50,167,235,.08)}

/* overview mode cards */
/* Overview section headers — the rule runs to the right edge so the two card rows
   read as separate sections rather than one long list of cards. */
.ov-sechead{display:flex;align-items:center;gap:10px;margin:0 0 6px}
.ov-sechead--gap{margin-top:30px}
.ov-sechead h3{margin:0;font-size:.74rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--fg2);white-space:nowrap}
.ov-sechead .ov-rule{flex:1;height:1px;background:var(--border)}
.ov-tag{font-size:.66rem;font-weight:700;letter-spacing:.06em;color:var(--brand);
  background:var(--highlight-bg);border:1px solid var(--highlight-border);
  padding:.12em .5em;border-radius:4px;white-space:nowrap;font-variant-numeric:tabular-nums}
.ov-subcap{font-size:.82rem;margin:0 0 14px}

/* Card counts here run 1–6 (PUBG's six modes), and the two Overview rows rarely hold
   the same number — modes played this season vs modes ever played. No single track
   floor balances both: at the old 200px a desktop row fit five, so six modes stranded
   one card alone underneath, and widening the floor enough to fix that turned four
   modes into 3+1 instead. So the column count is set per row by _balanceModeCards(),
   which counts VISIBLE cards — unplayed modes are hidden with display:none rather
   than removed, so any CSS child count would see six every time. Five or six cards go
   three-across (3+2, 3+3); fewer stay on one row. --mc-cols defaults to 4 so the grid
   is sane before the JS runs. Below 900px it reflows on width instead. */
.mode-cards{display:grid;grid-template-columns:repeat(var(--mc-cols,4),minmax(0,1fr));gap:12px}
@media (max-width:900px){
  .mode-cards{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
}
.mode-card{background:#0a1120;border:1px solid #1b2840;border-radius:.75rem;padding:16px;transition:border-color .15s}
.mode-card.best{border-color:rgba(50,167,235,.4)}
.mode-card .mc-name{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:10px}
.mode-card .mc-kd{font-size:1.8rem;font-weight:800;color:var(--brand);line-height:1}
.mode-card .mc-sub{font-size:.78rem;color:var(--muted);margin-top:4px}
.mode-card.loading{opacity:.5}

/* ranked */
.ranked-tier{display:flex;align-items:center;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.tier-icon{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.6rem;flex-shrink:0}
.tier-icon-img{width:72px;height:72px;object-fit:contain;flex-shrink:0}
.rp-bar-wrap{flex:1;min-width:180px}
.rp-label{font-size:.75rem;color:var(--muted);margin-bottom:6px}
.rp-bar{height:8px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden}
.rp-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--brand),#5bc8f5);transition:width .8s ease}

/* match history table */
.match-table{width:100%;border-collapse:collapse;font-size:.85rem}
.match-table th{text-align:left;padding:8px 12px;font-size:.7rem;font-weight:700;text-transform:uppercase;
                letter-spacing:.07em;color:var(--muted);border-bottom:1px solid var(--border)}
.match-table td{padding:9px 12px;border-bottom:1px solid rgba(255,255,255,.04)}
.match-table tr:last-child td{border-bottom:none}
.match-table tr:hover td{background:rgba(255,255,255,.025)}
.place-1{color:#f0c040;font-weight:800}
.place-top5{color:#4ade80;font-weight:700}
.place-top10{color:#22d3ee;font-weight:700}
.game-mode-pill{font-size:.7rem;padding:.15rem .45rem;border-radius:.3rem;background:rgba(255,255,255,.07);color:var(--muted)}
.game-mode-pill--ranked{background:rgba(234,179,8,.15);color:#fde68a;border:1px solid rgba(234,179,8,.3);font-weight:600}

/* Match History — tap a row to open the match drawer: result, timeline, squad,
   eliminations, route map, damage and fights */
.mh-match-row[role="button"]{cursor:pointer}
.mh-match-row[role="button"]:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.mh-caret{display:inline-block;width:6px;height:6px;margin-right:8px;border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted);transform:rotate(-45deg);transition:transform .18s;vertical-align:middle}
.mh-match-row[aria-expanded="true"] .mh-caret{transform:rotate(45deg);border-color:var(--brand)}
.mh-match-row[aria-expanded="true"] td{background:rgba(50,167,235,.06)}
.mh-detail-row > td{padding:0 !important;background:rgba(10,17,32,.55)}
.mh-detail-row:hover > td{background:rgba(10,17,32,.55) !important}
.mh-spin{width:13px;height:13px;border:2px solid rgba(255,255,255,.15);border-top-color:var(--brand);
  border-radius:50%;animation:mh-sp .7s linear infinite;flex-shrink:0}
@keyframes mh-sp{to{transform:rotate(360deg)}}

/* The history table scrolls sideways on narrow screens; the drawer stays pinned to the
   visible width (JS sets its width to the scroll container's) instead of scrolling with it. */
.md-drawer{position:sticky;left:0;box-sizing:border-box;padding:22px 22px 22px;font-size:.85rem;white-space:normal}
.md-note{font-size:.82rem;color:var(--muted)}
.md-loading{display:flex;align-items:center;gap:9px;margin-top:18px;font-size:.8rem;color:var(--muted)}
.md-skel{height:10px;border-radius:4px;background:rgba(255,255,255,.05)}
.md-fail{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:18px;padding:11px 13px;
  border:1px dashed rgba(242,119,95,.35);border-radius:8px;font-size:.8rem;color:var(--fg2)}
.md-btn{font:inherit;font-size:.78rem;font-weight:650;color:var(--fg);background:rgba(12,17,28,.7);
  border:1px solid rgba(255,255,255,.16);border-radius:6px;min-height:34px;padding:0 12px;cursor:pointer;flex-shrink:0}
.md-btn:hover{background:rgba(255,255,255,.1)}
.md-kick{font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--fg2)}
.md-ai{display:inline-block;font-size:.56rem;font-weight:800;letter-spacing:.06em;color:var(--muted);
  border:1px solid rgba(255,255,255,.14);border-radius:3px;padding:0 4px;line-height:14px;margin-left:6px;flex-shrink:0}

.md-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px 28px;flex-wrap:wrap}
.md-title{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.md-place{font-size:1.9rem;font-weight:800;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.md-verdict{font-size:1.3rem;font-weight:800;line-height:1;color:var(--fg)}
.md-sub{font-size:.8rem;color:var(--fg2);margin-top:8px}
.md-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.md-badge{font-size:.72rem;font-weight:650;padding:3px 9px;border-radius:999px;color:#f0c040;
  background:rgba(240,192,64,.08);border:1px solid rgba(240,192,64,.25)}
.md-badge--cyan{color:#22d3ee;background:rgba(34,211,238,.07);border-color:rgba(34,211,238,.25)}
.md-side{display:flex;flex-direction:column;align-items:flex-end;gap:3px;text-align:right;min-width:0}
.md-side-name{font-size:1.1rem;font-weight:750;color:var(--brand);text-decoration:none;display:inline-flex;align-items:center}
a.md-side-name:hover{color:var(--fg)}
.md-side-name.plain{color:var(--fg)}
.md-side-detail{font-size:.78rem;color:var(--fg2)}
.md-side-detail2{font-size:.74rem;color:var(--muted)}

.md-sec{margin-top:22px;padding-top:20px;border-top:1px solid rgba(255,255,255,.06)}
.md-sec-head{font-size:.66rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--fg2);
  display:flex;gap:9px;align-items:baseline;flex-wrap:wrap;margin-bottom:9px}
.md-sec-head span{font-size:.8rem;font-weight:600;letter-spacing:0;text-transform:none;color:var(--muted)}
.md-sec-head span.k{color:#f2775f;font-weight:700}

/* timeline */
.md-tl{position:relative;margin-top:22px}
.md-tick{position:absolute;top:4px;width:2px;height:14px;margin-left:-1px;border-radius:1px;background:#f2775f}
.md-tick.ai{background:rgba(242,119,95,.4)}
.md-tick.hs::after{content:"";position:absolute;top:-5px;left:-2px;width:6px;height:6px;border-radius:50%;background:#f2775f}
.md-track{position:absolute;top:24px;left:0;right:0;height:6px;border-radius:3px;background:rgba(255,255,255,.06)}
.md-track-fill{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:var(--brand);opacity:.8}
.md-dot{position:absolute;top:27px;width:12px;height:12px;border-radius:50%;transform:translate(-50%,-50%);
  box-sizing:border-box;background:#0c111c;border:2px solid var(--fg2)}
.md-dot.land{border-color:var(--brand)}
.md-dot.mate_killed{border-color:var(--muted)}
.md-dot.knocked{border-color:var(--gold)}
.md-dot.revive,.md-dot.revived_by{background:var(--green);border-color:#0c111c}
.md-dot.win{width:18px;height:18px;background:#f0c040;border:3px solid #0c111c}
.md-dot.death{width:18px;height:18px;background:var(--red);border:3px solid #0c111c}
.md-lab{position:absolute;display:flex;flex-direction:column;gap:1px;font-size:.72rem;color:var(--fg);white-space:nowrap}
.md-lab.end{align-items:flex-end}
.md-lab .t,.md-ev .t{font-size:.66rem;color:var(--muted);font-variant-numeric:tabular-nums}
.md-spect{position:absolute;top:3px;font-size:.72rem;color:var(--muted);white-space:nowrap}
.md-legend{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px 16px;margin-top:6px;font-size:.68rem;color:var(--muted)}
.md-lg{display:inline-flex;align-items:center;gap:6px}
.md-sw-k{position:relative;display:inline-block;width:2px;height:11px;border-radius:1px;background:#f2775f}
.md-sw-k.ai{background:rgba(242,119,95,.4)}
.md-sw-k.hs::after{content:"";position:absolute;top:-4px;left:-2px;width:6px;height:6px;border-radius:50%;background:#f2775f}
.md-lg .md-dot{position:static;transform:none;width:10px;height:10px}
.md-tl-list{display:none;margin-top:10px}
.md-ev{display:flex;align-items:center;gap:9px;font-size:.78rem;color:var(--fg);padding:3px 0}
.md-ev .md-dot{position:static;transform:none;flex-shrink:0}
.md-ev .t{width:38px;font-size:.72rem}

/* squad + match stats */
.md-mid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);column-gap:40px;row-gap:22px}
.md-mid.solo{grid-template-columns:minmax(0,1fr)}
.md-sq{display:grid;grid-template-columns:minmax(0,1fr) 30px 52px 30px 56px 54px 66px;column-gap:8px;align-items:center;padding:8px 9px}
.md-sq.h{padding-top:0;padding-bottom:7px;font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.md-sq.r{border-top:1px solid rgba(255,255,255,.05);font-size:.84rem}
.md-sq.you{background:rgba(50,167,235,.08);background:color-mix(in srgb,var(--brand) 9%,transparent);border-radius:6px;border-top-color:transparent}
.md-sq.tot{border-top:1px solid rgba(255,255,255,.1);font-size:.78rem;color:var(--fg2)}
.md-sq .n{text-align:right;font-variant-numeric:tabular-nums}
.md-sq .n.t{color:var(--fg2);font-size:.78rem}
.md-who{display:flex;flex-direction:column;gap:1px;min-width:0}
.md-who-top{display:flex;align-items:center;gap:6px;min-width:0}
.md-nm{font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--fg);text-decoration:none}
a.md-nm{color:var(--brand)}
a.md-nm:hover{color:var(--fg)}
.md-mvp{font-size:.56rem;font-weight:800;letter-spacing:.06em;color:#f0c040;border:1px solid rgba(240,192,64,.4);
  border-radius:3px;padding:0 4px;line-height:14px;flex-shrink:0}
.md-fate{font-size:.72rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.md-fate.alive{color:var(--green)}
.md-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
.md-st{padding:9px 0 10px;border-top:1px solid rgba(255,255,255,.05);display:flex;flex-direction:column;gap:1px;min-width:0}
.md-st .l{font-size:.72rem;color:var(--fg2)}
.md-st .v{font-size:1.2rem;font-weight:750;color:var(--fg);font-variant-numeric:tabular-nums}
.md-st .s{font-size:.7rem;color:var(--muted);min-height:1.1em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* eliminations */
.md-fd{display:grid;grid-template-columns:48px minmax(0,190px) minmax(0,1fr) 110px 62px;grid-template-areas:"t v g w d";
  column-gap:12px;row-gap:3px;align-items:center;padding:7px 4px}
.md-fd.h{padding-top:0;font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.md-fd.r{border-top:1px solid rgba(255,255,255,.05);font-size:.84rem}
.md-fd.bot{opacity:.72}
.md-fd .t{grid-area:t}.md-fd .v{grid-area:v}.md-fd .g{grid-area:g}.md-fd .w{grid-area:w}.md-fd .d{grid-area:d}
.md-fd.r .t,.md-fd.r .d,.md-fd.r .w{font-size:.78rem;color:var(--fg2);font-variant-numeric:tabular-nums}
.md-fd .d{text-align:right}
.md-vic{display:flex;align-items:center;gap:8px;min-width:0;font-weight:650}
.md-vic a,.md-vic .nm{color:var(--brand);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.md-vic .nm{color:var(--fg)}
.md-vic a:hover{color:var(--fg)}
.md-vic svg{color:#f2775f;flex-shrink:0}
.md-tags{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
.md-how{font-size:.76rem;color:var(--fg2);margin-right:3px}
.md-tag{font-size:.64rem;font-weight:700;padding:1px 6px;border-radius:4px;white-space:nowrap}
.md-tag.red{color:#f2775f;background:rgba(242,119,95,.1)}
.md-tag.gold{color:#f0c040;background:rgba(240,192,64,.1)}
.md-tag.purple{color:#bba6fc;background:rgba(167,139,250,.12)}

/* route map + damage/fights */
.md-band{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:36px;row-gap:24px;align-items:start}
.md-band.nomap{grid-template-columns:minmax(0,1fr)}
.md-map{position:relative;aspect-ratio:1/1;border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,.08);background:#0a1a24}
.md-map svg{display:block;width:100%;height:100%}
.md-map .md-btn{position:absolute;top:10px;right:10px}
.md-map-chip{position:absolute;left:10px;top:10px;font-size:.7rem;font-weight:650;color:var(--fg);background:rgba(12,17,28,.82);
  border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:4px 10px;pointer-events:none}
.md-map-legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:12px;font-size:.74rem;color:var(--fg2)}
.md-map-legend b{color:var(--fg);font-weight:650}
.md-dmg-line{font-size:.86rem;color:var(--fg2);line-height:1.5}
.md-dmg-line b{font-size:1.2rem;font-weight:800;color:var(--fg);font-variant-numeric:tabular-nums}
.md-subhead{font-size:.72rem;font-weight:650;color:var(--fg2);margin:16px 0 9px}
.md-bars{display:flex;flex-direction:column;gap:8px}
.md-bar{display:grid;grid-template-columns:96px minmax(0,1fr) 46px;column-gap:10px;align-items:center;font-size:.8rem}
.md-bar .n{text-align:right;color:var(--fg2);font-variant-numeric:tabular-nums}
.md-bar-track{position:relative;height:7px;border-radius:4px;background:rgba(255,255,255,.05);overflow:hidden}
.md-bar-fill{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:var(--brand)}
.md-bar-fill.head{background:#f2775f}
.md-fg{display:grid;grid-template-columns:84px minmax(0,1fr) 86px;column-gap:12px;align-items:center;padding:9px 2px;
  border-top:1px solid rgba(255,255,255,.05)}
.md-fg .when{font-size:.74rem;color:var(--muted);font-variant-numeric:tabular-nums}
.md-fg .vs{display:flex;flex-direction:column;gap:2px;min-width:0}
.md-fg .vs-top{display:flex;align-items:center;min-width:0;font-size:.84rem;font-weight:650}
.md-fg .vs-top a,.md-fg .vs-top .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--brand);text-decoration:none}
.md-fg .vs-top .nm{color:var(--fg)}
.md-fg .vs-top .more{color:var(--muted);font-weight:500;font-size:.74rem;margin-left:6px;white-space:nowrap}
.md-fg .res{font-size:.74rem;color:var(--fg2)}
.md-fg .res.good{color:#5fe0b0}
.md-fg .res.bad{color:#f08a93}
.md-dt{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.md-dt-bar{display:flex;width:86px;height:6px;gap:2px;border-radius:3px;overflow:hidden}
.md-dt-bar i{display:block;flex-basis:0}
.md-dt-bar .a{background:var(--green)}
.md-dt-bar .b{background:var(--red)}
.md-dt-num{font-size:.74rem;font-variant-numeric:tabular-nums;color:var(--muted)}
.md-dt-num .a{color:#5fe0b0}
.md-dt-num .b{color:#f08a93}

/* actions */
.md-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.md-act{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:0 14px;border-radius:8px;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);color:var(--fg);font:inherit;font-size:.8rem;
  font-weight:650;cursor:pointer;text-decoration:none;box-sizing:border-box}
.md-act:hover{background:rgba(255,255,255,.08);color:var(--fg)}
.md-act svg{color:var(--brand);flex-shrink:0}

@media (max-width:900px){
  .md-mid,.md-band{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .md-drawer{padding:16px 14px 18px}
  .md-side{align-items:flex-start;text-align:left}
  .md-tl{height:44px !important}
  .md-lab,.md-spect,.md-legend{display:none}
  .md-tl-list{display:block}
  .md-sq{grid-template-columns:minmax(0,1fr) 28px 54px 62px}
  .md-sq .x{display:none}
  .md-fd{grid-template-columns:40px minmax(0,1fr) auto;grid-template-areas:"t v d" ". g w"}
  .md-fd.h{display:none}
  .md-fg{grid-template-columns:minmax(0,1fr) 86px;grid-template-areas:"when dt" "vs dt"}
  .md-fg .when{grid-area:when}.md-fg .vs{grid-area:vs}.md-fg .md-dt{grid-area:dt}
  .md-act{flex:1 1 100%;min-height:44px}
}
@media (prefers-reduced-motion:reduce){.mh-spin{animation:none}.mh-caret{transition:none}}

/* weapons table */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.weapon-name-cell{display:flex;align-items:center;gap:8px}
.weapon-icon{width:32px;height:32px;object-fit:contain;flex-shrink:0;filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))}
.weapons-table{width:100%;border-collapse:collapse;font-size:.85rem}
.weapons-table th{text-align:left;padding:8px 12px;font-size:.7rem;font-weight:700;text-transform:uppercase;
                  letter-spacing:.07em;color:var(--muted);border-bottom:1px solid var(--border);cursor:pointer;white-space:nowrap}
.weapons-table th:hover{color:var(--fg)}
.weapons-table th.sort-asc,.weapons-table th.sort-desc{color:var(--brand)}
.weapons-table th.sort-asc::after{content:" ↑"}
.weapons-table th.sort-desc::after{content:" ↓"}
.weapons-table td{padding:9px 12px;border-bottom:1px solid rgba(255,255,255,.04)}
.weapons-table td.active-col{color:var(--brand)}
.weapons-table tr:last-child td{border-bottom:none}
.weapons-table tr:hover td{background:rgba(255,255,255,.025)}
.top-weapon{border-left:2px solid var(--brand)}
/* Weapons — tap a row to expand a full stat breakdown (also surfaces the columns
   that scroll off-screen on a phone). Top row of the current sort starts open. */
.wpn-row[role="button"]{cursor:pointer}
.wpn-row[role="button"]:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.wpn-caret{display:inline-block;width:6px;height:6px;margin-right:2px;border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted);transform:rotate(-45deg);transition:transform .18s;flex-shrink:0}
.wpn-row[aria-expanded="true"] .wpn-caret{transform:rotate(45deg);border-color:var(--brand)}
.wpn-row[aria-expanded="true"] td{background:rgba(50,167,235,.06)}
.wpn-detail > td{padding:0 !important;background:rgba(10,17,32,.55)}
.weapons-table tr.wpn-detail:hover > td{background:rgba(10,17,32,.55)}

/* Weapons tab — signature weapon, kills by class, trends, lately, class filter,
   and the per-weapon drawer (mastery, normal vs ranked, comparisons, hit profile) */
.wx-top{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:14px;margin-bottom:14px}
.wx-top.solo{grid-template-columns:minmax(0,1fr)}
.wx-panel{background:rgba(255,255,255,.025);border:1px solid var(--border);border-radius:12px;padding:18px 20px;min-width:0}
.wx-kick{font-size:.64rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--fg2)}
.wx-sig-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.wx-sig-name{font-size:2.1rem;font-weight:800;letter-spacing:-.02em;line-height:1;margin-top:8px}
.wx-sig-icon{height:70px;width:min(300px,48%);object-fit:contain;object-position:right center;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
.wx-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.wx-tag{display:inline-flex;align-items:center;font-size:.64rem;font-weight:700;padding:2px 7px;border-radius:4px;color:var(--fg2);background:rgba(255,255,255,.07);white-space:nowrap;line-height:1.4}
.wx-tag--lv{color:var(--fg);background:rgba(50,167,235,.14);background:color-mix(in srgb,var(--brand) 16%,transparent)}
.wx-tag--gold{color:#f2c94c;background:rgba(242,169,0,.12)}
.wx-sig-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:12px;margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.06)}
.wx-stat{display:flex;flex-direction:column;gap:2px;min-width:0}
.wx-stat .l{font-size:.72rem;color:var(--muted)}
.wx-stat .v{font-size:1.3rem;font-weight:750;letter-spacing:-.01em}
.wx-stat .v small{font-size:.76rem;font-weight:600;color:var(--muted);margin-left:3px}
.wx-sig-foot{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:12px;font-size:.8rem;color:var(--fg2)}
.wx-classes-head{font-size:.86rem;color:var(--fg);margin:5px 0 10px}
.wx-cbar{display:grid;grid-template-columns:56px minmax(0,1fr) 38px;column-gap:10px;align-items:center;font-size:.78rem;padding:3px 0}
.wx-cbar .n{text-align:right;color:var(--fg2);font-variant-numeric:tabular-nums}
.wx-track{position:relative;height:10px}
.wx-track i{position:absolute;left:0;top:0;bottom:0;border-radius:0 4px 4px 0;background:var(--brand)}
.wx-strip{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;margin-bottom:14px;padding:12px 16px}
.wx-strip-label{display:flex;flex-direction:column;gap:2px;min-width:170px}
.wx-strip-label span:last-child{font-size:.72rem;color:var(--muted)}
.wx-late{display:inline-flex;align-items:center;gap:9px;padding:6px 11px 6px 9px;border:1px solid var(--border);border-radius:8px}
.wx-late .weapon-icon{width:52px;height:22px}
.wx-late b{font-size:.82rem}
.wx-late .m{display:block;font-size:.7rem;color:var(--muted)}
.wx-trend{margin-bottom:14px}
.wx-trend-head{font-size:1.1rem;font-weight:750;margin-top:4px}
.wx-trend-sub{font-size:.78rem;color:var(--muted);margin-top:2px}
.wx-trow{display:grid;grid-template-columns:110px 60px 130px minmax(0,1fr);column-gap:14px;align-items:center;padding:8px 0;border-top:1px solid rgba(255,255,255,.05);font-size:.83rem}
.wx-trow.h{border-top:0;padding:12px 0 6px;font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.wx-trow .now{text-align:right;font-size:1.05rem;font-weight:750;font-variant-numeric:tabular-nums}
.wx-up{color:var(--green)}
.wx-down{color:#f08a93}
.wx-flat{color:var(--muted)}
.wx-cols{display:flex;align-items:flex-end;gap:3px;height:30px}
.wx-cols i{display:block;width:12px;border-radius:3px 3px 0 0;background:#3a4353}
.wx-cols i.now{background:var(--brand)}
.wx-cols i.none{height:2px;background:rgba(255,255,255,.08)}
.wx-chips{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 12px}
.wx-chip{font:inherit;font-size:.78rem;font-weight:650;color:var(--fg2);background:none;border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:0 12px;min-height:32px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.wx-chip:hover{color:var(--fg);border-color:rgba(255,255,255,.22)}
.wx-chip.active{color:var(--bg);background:var(--fg);border-color:var(--fg)}
.wx-chip .c{color:var(--muted);font-weight:600}
.wx-chip.active .c{color:#4b5366}
.wx-mast{white-space:nowrap}
.wx-mast b{font-weight:700}
.wx-mast span{font-size:.72rem;color:var(--muted);margin-left:5px}
.wx-drawer{position:sticky;left:0;box-sizing:border-box;padding:18px 20px}
.wx-dgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:30px;row-gap:22px}
.wx-dhead{font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--fg2);margin-bottom:10px}
.wx-lv{display:flex;align-items:baseline;gap:9px;padding-bottom:10px}
.wx-lv b{font-size:1.6rem;font-weight:800;letter-spacing:-.02em}
.wx-lv span{font-size:.76rem;color:var(--muted)}
.wx-line{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:7px 0;border-top:1px solid rgba(255,255,255,.05);font-size:.83rem}
.wx-line .l{color:var(--muted);font-weight:600;white-space:nowrap}
.wx-line .v{font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.wx-line .v small{display:block;font-size:.68rem;font-weight:500;color:var(--muted);margin-top:1px}
.wx-cmp{display:grid;grid-template-columns:minmax(0,1fr) 70px 70px;column-gap:8px;padding:7px 0;border-top:1px solid rgba(255,255,255,.05);font-size:.83rem}
.wx-cmp .l{color:var(--muted);font-weight:600}
.wx-cmp .v{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.wx-cmp.h{border-top:0;padding-top:0;font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.wx-rank b{font-size:1.5rem;font-weight:800}
.wx-rank span{font-size:.78rem;color:var(--muted);margin-left:6px}
.wx-meter{position:relative;height:8px;border-radius:4px;margin:7px 0 4px;background:rgba(50,167,235,.16);background:color-mix(in srgb,var(--brand) 18%,transparent)}
.wx-meter i{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:var(--brand)}
.wx-note{font-size:.8rem;color:var(--muted);line-height:1.5}
.wx-empty{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:16px;padding:10px 13px;border:1px dashed rgba(255,255,255,.12);border-radius:8px;font-size:.8rem;color:var(--fg2)}
.wx-btn{font:inherit;font-size:.78rem;font-weight:650;color:var(--fg);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);border-radius:6px;min-height:36px;padding:0 12px;cursor:pointer;white-space:nowrap;flex-shrink:0}
.wx-btn:hover{background:rgba(255,255,255,.09)}
.wx-usage{margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,.06)}
.wx-usage-head{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap}
.wx-usage-head .s{font-size:.8rem;color:var(--fg2);margin-top:4px;max-width:70ch}
.wx-legend{display:flex;gap:14px;font-size:.74rem;color:var(--fg2)}
.wx-legend span{display:inline-flex;align-items:center;gap:6px}
.wx-sw{display:inline-block;width:10px;height:10px;border-radius:2px}
.wx-ugrid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,.8fr);column-gap:34px;row-gap:22px;margin-top:16px}
.wx-ctitle{font-size:.8rem;font-weight:650;color:var(--fg);margin-bottom:6px}
.wx-grp{display:grid;grid-template-columns:68px minmax(0,1fr);column-gap:10px;align-items:center;padding:4px 0}
.wx-grp .lab{font-size:.76rem;color:var(--fg2)}
.wx-pair{display:flex;flex-direction:column;gap:2px}
.wx-bar{display:flex;align-items:center;gap:7px;height:11px}
.wx-bar i{display:block;height:9px;border-radius:0 4px 4px 0}
.wx-bar i.me{background:var(--brand)}
.wx-bar i.all{background:#5b6577}
.wx-bar b{font-size:.68rem;font-weight:650;font-variant-numeric:tabular-nums}
.wx-insight{margin-top:10px;font-size:.78rem;color:var(--fg2);line-height:1.5}
.wx-foot{margin-top:10px;font-size:.72rem;color:var(--muted);text-align:right}
@media (max-width:900px){
  .wx-top,.wx-dgrid,.wx-ugrid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .wx-panel{padding:14px}
  .wx-sig-name{font-size:1.7rem}
  .wx-sig-icon{height:44px}
  .wx-sig-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wx-strip-label{min-width:0;width:100%}
  .wx-trow{grid-template-columns:minmax(0,1fr) 44px 120px}
  .wx-trow .wx-cols-cell{display:none}
  .weapons-table .wx-sm-hide,.weapons-table .wx-name-tag,.weapons-table .weapon-name-cell .weapon-icon{display:none}
  .wx-drawer{padding:14px}
  .wx-empty{flex-direction:column;align-items:flex-start}
}

/* skeleton loader */
.skeleton{background:rgba(255,255,255,.06);border-radius:.4rem;animation:shimmer 1.4s infinite}
@keyframes shimmer{0%,100%{opacity:.5}50%{opacity:1}}
.skel-row{height:44px;margin-bottom:8px}
.skel-stat{height:80px;border-radius:.7rem}

/* error / empty */
.alert{padding:14px 18px;border-radius:var(--radius-sm);border:1px solid rgba(239,68,68,.3);
       background:rgba(239,68,68,.07);color:#fca5a5;margin-top:20px}
.empty{text-align:center;padding:60px 20px;color:var(--muted)}
.empty .icon{font-size:3rem;margin-bottom:12px;display:flex;justify-content:center}

/* ── WOLF REPORTS — card feed (ported from reports.php so the tab matches it) ── */
.card-list{display:block}
.card-list .featured-row:last-child{margin-bottom:0}
.featured-row--first{border-color:rgba(50,167,235,.3)}
.featured-row--sub .featured-row__eyebrow{color:var(--muted);font-variant-numeric:tabular-nums}
.card-daysep{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);padding:10px 2px 12px;margin-bottom:14px;border-bottom:1px solid var(--border)}
.card-list > .card-daysep:first-child{padding-top:0}
/* kill-location crop: map zoomed to where the kill happened, pin dead centre */
.km{position:absolute;inset:0;overflow:hidden;background:#0a1120}
.km__img{position:absolute;left:50%;top:50%;width:500%;aspect-ratio:1;
  transform:translate(calc(var(--kx) * -100%),calc(var(--ky) * -100%))}
.km__img.map-art{background-size:100% 100%}
.km__img.map-art::before{display:none}
.km__pin{position:absolute;left:50%;top:50%;z-index:1;width:9px;height:9px;border-radius:50%;
  transform:translate(-50%,-50%);background:var(--gold,#f2a900);
  border:1.5px solid rgba(0,0,0,.8);box-shadow:0 0 0 3px rgba(242,169,0,.3)}
.card-list .is-overflow{display:none}
.card-list.is-expanded .featured-row.is-overflow{display:flex}
.card-list.is-expanded .card-daysep.is-overflow{display:block}
.card-list.is-expanded .wg-match.is-overflow{display:block}
.cards-more{display:block;width:100%;margin-top:14px;padding:.7rem;cursor:pointer;
  background:var(--glass);border:1px solid var(--border);border-radius:var(--radius-sm);
  color:var(--fg2);font-size:.82rem;font-weight:700;font-family:inherit;transition:background .15s,color .15s}
.cards-more:hover{background:var(--glass-hover);color:var(--fg)}
/* outcome / footage filter chips */
.wg-filters{display:flex;gap:20px;flex-wrap:wrap;align-items:flex-start;
  padding-bottom:18px;margin-bottom:20px;border-bottom:1px solid var(--border)}
.wg-fgroup{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.wg-flabel{font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  margin-right:3px;font-weight:700}
.wg-chip{display:inline-flex;align-items:center;gap:6px;padding:.34rem .72rem;border-radius:100px;
  font-size:.78rem;font-weight:600;cursor:pointer;background:none;font-family:inherit;
  border:1px solid var(--border);color:var(--muted);transition:color .15s,border-color .15s,background .15s}
.wg-chip:hover{color:var(--fg);border-color:rgba(255,255,255,.22)}
.wg-chip[aria-pressed="true"]{background:rgba(50,167,235,.14);border-color:rgba(50,167,235,.4);color:var(--brand)}
.wg-chip .n{font-size:.68rem;opacity:.6;font-variant-numeric:tabular-nums}
/* match cards — consecutive events sharing a matchId collapse into one */
.wg-match{background:var(--glass);border:1px solid var(--border);border-radius:var(--radius);
  margin-bottom:14px;overflow:hidden}
.wg-match:last-child{margin-bottom:0}
.wg-match--first{border-color:rgba(50,167,235,.3)}
.wg-match__head{display:flex;align-items:stretch;gap:16px;padding:16px;cursor:pointer;width:100%;
  background:none;border:0;font:inherit;color:inherit;text-align:left;transition:background .15s}
.wg-match__head:hover{background:var(--glass-hover)}
.wg-match__head .featured-row__eyebrow,
.wg-match__head .featured-row__title,
.wg-match__head .featured-row__meta{display:block}
.wg-count{flex-shrink:0;align-self:center;text-align:center;padding:0 6px;min-width:46px}
.wg-count b{font-size:1.75rem;font-weight:800;line-height:1;display:block;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.wg-count span{font-size:.55rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700}
.wg-chev{flex-shrink:0;align-self:center;display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:50%;color:var(--fg2);transition:transform .18s,color .15s,background .15s}
.wg-chev svg{width:16px;height:16px;display:block}
.wg-match__head:hover .wg-chev{color:var(--fg);background:rgba(255,255,255,.07)}
.wg-match[data-open="1"] .wg-chev{transform:rotate(90deg)}
.wg-kills{border-top:1px solid var(--border);padding:4px 16px 10px}
.wg-match[data-open="0"] .wg-kills{display:none}
.wg-kill{display:flex;align-items:center;gap:12px;padding:7px 0;font-size:.85rem;
  border-bottom:1px solid rgba(255,255,255,.035)}
.wg-kill:last-child{border-bottom:none}
.wg-kill__t{font-size:.71rem;color:var(--muted);width:62px;flex-shrink:0;font-variant-numeric:tabular-nums}
.wg-kill__ev{width:120px;flex-shrink:0;font-weight:600;font-size:.77rem}
.wg-kill__v{font-weight:700;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wg-kill__w{color:var(--muted);font-size:.75rem;flex-shrink:0}
.wg-kill__go{color:var(--brand);font-size:.73rem;font-weight:700;flex-shrink:0;background:none;border:0;
  cursor:pointer;font-family:inherit;padding:0;transition:color .15s,background .15s,border-color .15s}
.wg-kill__go:hover{color:var(--fg)}
.wg-kill__go:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}
.wg-kill__go--dual{padding:.16rem .5rem;border-radius:100px;text-decoration:none;
  background:rgba(50,167,235,.14);border:1px solid rgba(50,167,235,.4)}
.wg-kill__go--dual:hover{color:var(--brand);background:rgba(50,167,235,.24);border-color:rgba(50,167,235,.7)}
.wg-ev-kill{color:var(--green)} .wg-ev-knock{color:var(--gold)} .wg-ev-death{color:var(--red)}
@media (max-width:700px){
  .wg-match__head{flex-direction:column}
  .wg-count{align-self:flex-start;text-align:left;padding:0}
  .wg-kill{flex-wrap:wrap;gap:8px}
  .wg-kill__ev{width:auto}
}
/* no-clip event detail panel (shown in the VOD modal when there's no footage) */
#vod-detail-panel{position:relative}

/* VOD modal */
#vod-modal{display:none;position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.88);
           align-items:center;justify-content:center;padding:20px}
#vod-modal.open{display:flex}
#vod-modal-inner{display:flex;flex-direction:column;width:min(1440px,96vw);height:min(900px,90vh);
                 background:#000;border-radius:var(--radius);overflow:hidden;
                 box-shadow:0 24px 80px rgba(0,0,0,.7)}
#vod-top-bar{display:flex;align-items:center;gap:10px;padding:9px 14px;
             background:rgba(11,15,20,.92);border-bottom:1px solid rgba(255,255,255,.08);
             flex-shrink:0}
#vod-top-left{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
#vod-event-label{font-size:.72rem;font-weight:700;padding:.2rem .55rem;border-radius:.35rem;
                 white-space:nowrap;flex-shrink:0}
#vod-victim{font-size:.88rem;font-weight:700;white-space:nowrap;overflow:hidden;
            text-overflow:ellipsis;color:#fff}
#vod-player-name{font-size:.75rem;font-weight:700;color:#fff;white-space:nowrap;
                 border-right:1px solid rgba(255,255,255,.12);padding-right:10px;margin-right:2px}
#vod-close{margin-left:8px;flex-shrink:0;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
           color:#fff;font-size:.8rem;font-weight:700;cursor:pointer;padding:.3rem .7rem;
           border-radius:.4rem;font-family:inherit;transition:background .15s}
#vod-close:hover{background:rgba(255,255,255,.16)}
#vod-frame{flex:1;width:100%;border:none;min-height:0}
#vod-bottom-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;
                padding:8px 14px;background:rgba(11,15,20,.92);
                border-top:1px solid rgba(255,255,255,.08);flex-shrink:0}
#vod-bottom-left{display:flex;align-items:center;gap:16px;font-size:.76rem;color:var(--muted);
                 flex:1;min-width:0;overflow:hidden}
#vod-bottom-left span{white-space:nowrap}
#vod-bottom-right{display:flex;gap:7px;flex-shrink:0}
.vod-action-btn{display:inline-flex;align-items:center;gap:.3rem;padding:.32rem .75rem;
                border-radius:.4rem;font-size:.78rem;font-weight:700;cursor:pointer;
                border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.07);
                color:#fff;text-decoration:none;font-family:inherit;transition:background .15s}
.vod-action-btn:hover{background:rgba(255,255,255,.15)}
.vod-btn{color:var(--brand);font-size:.82rem;background:none;border:none;cursor:pointer;
         padding:0;font-family:inherit;text-decoration:underline}

/* CTA band (stats page variant) */
.cta-band{background:var(--glass);border:1px solid var(--border);border-radius:var(--radius);
          padding:18px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ── LIVE BUBBLE BAR ──────────────────────────────────────────────────────── */
@keyframes live-bar-fade-in{from{opacity:0}to{opacity:1}}
#live-bar{background:rgba(50,167,235,.06);border-bottom:1px solid rgba(50,167,235,.15);padding:10px 0;overflow:visible;position:relative;z-index:200;display:block;opacity:0;pointer-events:none}
#live-bar.live-bar--visible{opacity:1;pointer-events:auto;animation:live-bar-fade-in .35s ease both}
.live-bar-inner{display:flex;align-items:center;gap:14px;max-width:1120px;margin:0 auto;padding:4px 28px;overflow-x:auto;overflow-y:visible;scrollbar-width:none}
.live-bar-inner::-webkit-scrollbar{display:none}
.live-bar-label{display:flex;align-items:center;gap:5px;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--brand);white-space:nowrap;flex-shrink:0}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--brand);box-shadow:0 0 6px var(--brand);animation:live-pulse 2s ease-in-out infinite}
@keyframes live-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}
.live-sep{width:1px;height:18px;background:rgba(50,167,235,.2);flex-shrink:0}
.live-bubbles{display:flex;gap:8px;align-items:center}
.live-bubble{display:flex;align-items:center;gap:7px;padding:4px 10px 4px 4px;background:rgba(50,167,235,.1);border:1px solid rgba(50,167,235,.2);border-radius:999px;color:var(--fg);font-size:.78rem;font-weight:600;white-space:nowrap;transition:background .15s,border-color .15s,transform .15s;flex-shrink:0;cursor:pointer;font-family:inherit}
.live-bubble:hover{background:rgba(50,167,235,.22);border-color:rgba(50,167,235,.5);transform:translateY(-1px)}
.live-avatar-wrap{position:relative;flex-shrink:0}
.live-avatar{width:26px;height:26px;border-radius:50%;object-fit:cover;display:block;border:1.5px solid rgba(50,167,235,.5)}
.live-indicator{position:absolute;bottom:-1px;right:-1px;width:9px;height:9px;border-radius:50%;background:var(--brand);border:1.5px solid var(--bg);box-shadow:0 0 5px var(--brand)}
.live-viewers{font-size:.68rem;font-weight:700;color:var(--muted);margin-left:2px}
#live-modal{display:none;position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.88);align-items:center;justify-content:center;padding:20px}
#live-modal.open{display:flex}
#live-modal-inner{display:flex;flex-direction:column;width:min(1200px,96vw);height:min(720px,88vh);background:#000;border-radius:var(--radius);overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,.7)}
#live-modal-top{display:flex;align-items:center;gap:10px;padding:9px 14px;background:rgba(11,15,20,.92);border-bottom:1px solid rgba(255,255,255,.08);flex-shrink:0}
#live-modal-name{font-size:.88rem;font-weight:700;color:#fff}
#live-modal-badge{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--brand);background:rgba(50,167,235,.15);border:1px solid rgba(50,167,235,.3);border-radius:.3rem;padding:.15rem .45rem}
#live-modal-close{margin-left:auto;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:#fff;font-size:.8rem;font-weight:700;cursor:pointer;padding:.3rem .7rem;border-radius:.4rem;font-family:inherit;transition:background .15s}
#live-modal-close:hover{background:rgba(255,255,255,.16)}
#live-modal-frame{flex:1;width:100%;border:none;min-height:0}

/* ── PLAYER FEED SECTIONS ─────────────────────────────────────────────────── */
@keyframes pf-fade-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.pf-animate{opacity:0;animation:pf-fade-up .35s ease forwards}
.player-feed-section{margin-top:16px}
.player-feed-glass{background:var(--glass);border:1px solid var(--border);border-radius:var(--radius);padding:22px}
.player-feed-title{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:14px}
.feed-cards-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.feed-filter-btns{display:flex;gap:6px;flex-wrap:wrap}
.feed-filter-btn{font-size:.72rem;font-weight:600;padding:3px 10px;border-radius:20px;border:1px solid var(--border);background:transparent;color:var(--muted);cursor:pointer;transition:background .15s,color .15s}
.feed-filter-btn:hover{background:var(--glass);color:var(--fg)}
.feed-filter-btn.active{background:var(--brand);color:#fff;border-color:transparent}
/* The shared .empty is a full-page treatment; inside a feed panel it only has to
   fill the space the cards left behind, so the filter row stays the focus. */
.player-feed-section .empty{padding:26px 16px;font-size:.85rem}
.player-feed-section .empty .icon{font-size:1.6rem;margin-bottom:6px}
.match-card{background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px 16px;display:flex;flex-direction:column;gap:8px;transition:border-color .15s,box-shadow .15s}
.match-card:hover{border-color:var(--border-brand)}
.match-card--ranked{border-color:rgba(242,169,0,.5);box-shadow:0 0 10px 2px rgba(242,169,0,.3),inset 0 0 8px rgba(242,169,0,.05)}
.match-card--ranked:hover{border-color:rgba(242,169,0,.75);box-shadow:0 0 14px 3px rgba(242,169,0,.4),inset 0 0 10px rgba(242,169,0,.08)}
/* Featured "Most Recent Win" card — one short horizontal row instead of a
   tall stacked card: map-art thumbnail, condensed MVP + kill line, View Match. */
.match-card--featured-row{
  grid-column:1/-1;display:flex;gap:16px;align-items:stretch;
  background:rgba(255,255,255,.03);border:1px solid rgba(242,169,0,.5);
  box-shadow:0 0 10px 2px rgba(242,169,0,.3),inset 0 0 8px rgba(242,169,0,.05);
  border-radius:var(--radius-sm);padding:20px 22px;transition:border-color .15s,box-shadow .15s}
.match-card--featured-row:hover{border-color:rgba(242,169,0,.75);box-shadow:0 0 14px 3px rgba(242,169,0,.4),inset 0 0 10px rgba(242,169,0,.08)}
.mcf-thumb{flex-shrink:0;width:200px;height:200px;align-self:center;border-radius:6px;overflow:hidden;position:relative;
  display:flex;align-items:flex-end;background-color:#0a1120}
.mcf-thumb::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.55) 100%)}
.mcf-thumb-label{position:relative;z-index:1;padding:6px;font-size:.6rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.mcf-body{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:6px}
.mcf-top{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.mcf-eyebrow{font-size:.64rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--gold)}
.mcf-map{font-size:.78rem;color:var(--muted)}
.mcf-time{font-size:.72rem;color:var(--muted);margin-left:auto}
.mcf-mvp{font-size:1.05rem;font-weight:800;color:var(--fg)}
.mcf-mvp a{color:var(--fg);text-decoration:none}
.mcf-mvp a:hover{color:var(--brand)}
.mcf-mvp-stats{font-weight:600;font-size:.8rem;color:var(--muted)}
.mcf-label{font-size:.6rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);flex-shrink:0}
.mcf-squad{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:.8rem;padding-top:8px;border-top:1px dashed rgba(255,255,255,.06)}
.mcf-squad .sq a{font-weight:600;color:var(--fg2);text-decoration:none}
.mcf-squad .sq a:hover{color:var(--brand)}
.mcf-squad .sq-stats{color:var(--muted);font-size:.76rem}
.mcf-kills{display:flex;align-items:center;gap:6px 8px;flex-wrap:wrap;font-size:.78rem;padding-top:8px;border-top:1px dashed rgba(255,255,255,.06);min-height:1.1em}
.mcf-kills .kf-by{color:var(--fg);font-weight:700;white-space:nowrap}
.mcf-kills .kf-pair{color:#f38ba0;font-weight:700;white-space:nowrap}
.mcf-kills .kf-pair a{color:inherit;text-decoration:none}
.mcf-kills .kf-pair a:hover{color:var(--brand)}
.mcf-kills .kf-w{color:var(--muted);font-weight:500}
.mcf-kills .more{color:var(--brand);font-weight:700;font-size:.76rem;white-space:nowrap}
/* Hidden-bot count reads as an aside, not as more kills worth clicking. */
.mcf-kills .more.bots{color:var(--muted);font-weight:600}
.mcf-cta{flex-shrink:0;align-self:center}
.mcf-cta .match-view-link{font-size:.76rem}
@media (max-width:520px){
  .match-card--featured-row{flex-direction:column}
  .mcf-thumb{width:100%;height:72px}
  .mcf-cta{align-self:flex-start}
}
.match-card-row1{display:flex;align-items:center;gap:4px}
.match-map{font-weight:800;font-size:.9rem}
.match-placement{font-size:.78rem;font-weight:700;color:var(--muted);white-space:nowrap;margin-right:auto}
.match-placement--win{color:var(--gold)}
.match-time{font-size:.72rem;color:var(--muted);white-space:nowrap}
.match-card-row2{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.match-mode-badge{background:var(--brand-glow2);color:var(--brand);border:1px solid var(--border-brand);border-radius:var(--radius-xs);padding:.1rem .4rem;font-size:.68rem;font-weight:700}
.match-type-badge{background:rgba(242,169,0,.12);color:var(--gold);border:1px solid rgba(242,169,0,.4);border-radius:var(--radius-xs);padding:.1rem .4rem;font-size:.68rem;font-weight:700;box-shadow:0 0 6px rgba(242,169,0,.3)}
.match-mvp{padding:10px 0 4px}
.match-mvp-name{font-weight:800;font-size:.95rem}
.match-mvp-name a{color:var(--fg);text-decoration:none}
.match-mvp-name a:hover{color:var(--brand)}
.match-mvp-stats{font-size:.78rem;color:var(--muted);margin-top:2px}
.match-squad{display:flex;flex-direction:column;gap:0;border-top:1px dashed rgba(255,255,255,.08);padding-top:6px}
.match-player-row{display:flex;align-items:center;gap:6px;padding:4px 0;font-size:.82rem}
.match-player-name{font-weight:600;flex:1;min-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.match-player-name a{color:var(--fg2);text-decoration:none}
.match-player-name a:hover{color:var(--brand)}
.match-player-stats{color:var(--muted);white-space:nowrap;font-size:.78rem}
.match-footer{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:6px;border-top:1px solid rgba(255,255,255,.05)}
.match-guild{font-size:.7rem;color:var(--muted)}
.match-view-link{font-size:.72rem;font-weight:700;color:var(--brand);cursor:pointer;background:none;border:none;font-family:inherit;padding:0;text-decoration:none;white-space:nowrap;transition:color .15s}
.match-view-link:hover{color:#fff}

/* ── Customize panel ──────────────────────────────────────────────────────── */
.cust-section-label{display:block;font-size:.72rem;font-weight:800;color:var(--fg2);margin-bottom:8px;text-transform:uppercase;letter-spacing:.08em}
.cust-bg-btn,.cust-card-btn,.cust-avatar-btn,.cust-glass-btn,.cust-avatar-src-btn{flex:1;padding:.45rem .3rem;border-radius:8px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:var(--muted);font-size:.78rem;font-weight:700;cursor:pointer;transition:color .15s,background .15s,border .15s}
.cust-swatch{width:26px;height:26px;border-radius:50%;cursor:pointer;border:none;outline-offset:2px;flex-shrink:0;transition:transform .1s}
.cust-swatch:hover{transform:scale(1.15)}
.cust-compact-row{display:flex;align-items:center;justify-content:space-between;padding:.55rem .7rem;border-radius:8px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03)}
.cust-toggle{position:relative;display:inline-block;width:38px;height:22px;flex-shrink:0}
.cust-toggle input{opacity:0;width:0;height:0}
.cust-toggle-slider{position:absolute;inset:0;background:rgba(255,255,255,.12);border-radius:22px;cursor:pointer;transition:background .2s}
.cust-toggle-slider::before{content:'';position:absolute;width:16px;height:16px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform .2s}
.cust-toggle input:checked + .cust-toggle-slider{background:var(--brand)}
.cust-toggle input:checked + .cust-toggle-slider::before{transform:translateX(16px)}
.cust-divider{border:none;border-top:1px solid rgba(255,255,255,.07);margin:4px 0}
.cust-url-input{width:100%;padding:.5rem .75rem;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:8px;color:var(--fg);font-size:.82rem;font-family:monospace;outline:none;transition:border-color .15s}
.cust-url-input:focus{border-color:rgba(255,255,255,.3)}
.cust-url-input::placeholder{color:var(--muted)}
.cust-url-input option{background:#0d1526;color:#e2e8f0}
#refresh-stats-btn:disabled{opacity:.5;cursor:not-allowed}
#refresh-stats-btn.cooldown{color:var(--muted);border-color:rgba(255,255,255,.1)}
#refresh-stats-btn.success{color:var(--green);border-color:rgba(52,211,153,.35)}

/* avatar presence indicators */
.avatar-wrap{position:relative;flex-shrink:0;display:inline-block}
.avatar-online-dot{position:absolute;bottom:6px;right:6px;width:18px;height:18px;border-radius:50%;background:#3ba55c;border:3px solid var(--bg);box-shadow:0 0 8px rgba(59,165,92,.8);display:none;animation:dot-pulse 2s ease-in-out infinite}
@keyframes dot-pulse{0%,100%{box-shadow:0 0 0 0 rgba(59,165,92,.6),0 0 8px rgba(59,165,92,.8)}50%{box-shadow:0 0 0 6px rgba(59,165,92,0),0 0 8px rgba(59,165,92,.8)}}
.avatar-live-badge{position:absolute;bottom:6px;right:6px;background:#ed4245;color:#fff;font-size:.52rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;padding:.15rem .4rem;border-radius:.3rem;border:2px solid var(--bg);white-space:nowrap;display:none;line-height:1.5;cursor:pointer;transition:background .15s}
.avatar-live-badge:hover{background:#c0392b}
.avatar-steam-btn{position:absolute;top:-2px;right:-2px;width:26px;height:26px;border-radius:50%;background:var(--bg);border:1px solid var(--border);display:none;align-items:center;justify-content:center;color:var(--fg2);text-decoration:none;transition:border-color .15s,color .15s}
.avatar-steam-btn:hover{border-color:rgba(102,192,244,.5);color:#66c0f4}

/* guild bubbles */
.guild-bubble{display:inline-flex;align-items:center;text-decoration:none;transition:transform .15s,opacity .15s,z-index 0s;margin-right:-6px;position:relative;z-index:0}
.guild-bubble:last-child{margin-right:0}
.guild-bubble:hover{transform:scale(1.15);opacity:.85;z-index:10}
.guild-bubble img,.guild-bubble-placeholder{width:22px;height:22px;border-radius:50%;object-fit:cover;border:1.5px solid rgba(255,255,255,.15);flex-shrink:0}
.guild-bubble-placeholder{background:rgba(50,167,235,.2);border-color:rgba(50,167,235,.3);display:flex;align-items:center;justify-content:center;font-size:.6rem;font-weight:800;color:var(--brand)}

/* AI Analysis — floating launcher + panel.
   --wg-install-banner-h is published by pwa_head.php: the iOS "Add to Home
   Screen" banner is fixed to the bottom at z-index 9999, so without this offset
   it sits on top of the launcher and swallows the wolf. It resolves to 0px
   everywhere the banner isn't showing, and the fallback keeps the rule honest
   if this page is ever served without the PWA include. */
.ai-launcher{
  position:fixed;right:20px;bottom:calc(20px + var(--wg-install-banner-h,0px));
  width:76px;height:76px;border-radius:50%;
  background:linear-gradient(155deg,#1a2432,#101720);border:1px solid rgba(50,167,235,.35);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,.4);z-index:450;transition:transform .15s ease,box-shadow .15s ease;
}
.ai-launcher:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,.5)}
.ai-launcher:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.ai-panel{
  position:fixed;right:20px;bottom:calc(106px + var(--wg-install-banner-h,0px));
  width:290px;max-width:calc(100vw - 40px);
  background:var(--bg2);border:1px solid var(--border);border-radius:.6rem;
  box-shadow:0 16px 44px rgba(0,0,0,.5);overflow:hidden;z-index:450;
  opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .16s ease,transform .16s ease;
}
.ai-panel.open{opacity:1;transform:translateY(0);pointer-events:auto}
.ai-panel-head{display:flex;align-items:center;gap:11px;padding:14px}
.ai-panel-head .ai-title{font-size:.85rem;font-weight:700}
.ai-panel-head .ai-sub{font-size:.68rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px}
.ai-panel-close{margin-left:auto;color:var(--muted);cursor:pointer;font-size:1rem;line-height:1;padding:2px 4px;background:none;border:none}
.ai-panel-close:hover{color:var(--fg)}
.ai-panel-body{padding:13px 14px}
.ai-bubble{background:var(--bg3);border:1px solid var(--border);border-radius:.5rem;padding:11px 13px;font-size:.82rem;line-height:1.6;color:var(--fg)}
.ai-time{font-size:.66rem;color:var(--muted);margin-top:7px}
.ai-panel-footer{border-top:1px solid var(--border);padding:10px 14px}
@media (max-width:480px){
  .ai-launcher{right:14px;bottom:calc(14px + var(--wg-install-banner-h,0px))}
  .ai-panel{right:14px;bottom:calc(100px + var(--wg-install-banner-h,0px));width:calc(100vw - 28px)}
}
@media (prefers-reduced-motion:reduce){
  .ai-panel,.ai-launcher{transition:none}
}
/* ── Tracking-consent popup ── */
#consent-modal{display:none;position:fixed;inset:0;z-index:600;background:rgba(0,0,0,.72);
  align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(3px)}
#consent-modal.open{display:flex;animation:consent-fade .2s ease both}
@keyframes consent-fade{from{opacity:0}to{opacity:1}}
#consent-card{width:min(440px,100%);background:var(--bg2,#0d1526);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:0 24px 80px rgba(0,0,0,.6);padding:26px 24px;text-align:center}
#consent-card .consent-icon{font-size:2.2rem;margin-bottom:10px}
#consent-card h3{margin:0 0 8px;font-size:1.15rem;font-weight:800;letter-spacing:-.01em}
#consent-card p{margin:0 0 18px;font-size:.9rem;color:var(--muted);line-height:1.5}
#consent-card .consent-name{color:var(--brand);font-weight:700}
.consent-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.consent-actions .btn{min-width:120px}
.consent-dismiss{display:block;margin:14px auto 0;background:none;border:none;color:var(--muted);
  font-size:.78rem;cursor:pointer;font-family:inherit;text-decoration:underline;opacity:.75}
.consent-dismiss:hover{opacity:1}