/* 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)}
/* NOT display:inline-flex!important. The button ships with style="display:none"
   and stats.js turns it on only once Steam data comes back — but an !important
   author declaration outranks an inline one, so the tab was showing for every
   player, linked or not, and the JS line that reveals it was dead code. The
   alignment properties are all this rule was ever needed for. */
.tab-btn--steam{align-items:center;gap:5px}
.tab-panel{display:none}.tab-panel.active{display:block}
/* Phone: eight tabs on one wrapping flex row came to roughly 796px of buttons
   against ~354px of screen — about three ragged rows, ~136px of tab bar before
   any content, on 34px-tall targets. A fixed 4-up grid puts every tab on screen
   in two even rows at 44px, and the two long labels wrap to two lines inside
   their own cell instead of pushing the row around. */
@media (max-width:640px){
  .tabs-bar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-bottom:18px}
  .tab-btn{display:flex;align-items:center;justify-content:center;text-align:center;
           min-height:44px;padding:.35rem .25rem;font-size:.75rem;line-height:1.2}
  /* The season dropdown is a child of .tabs-bar, so as a grid item it would be
     squeezed into one 84px cell. Give it the full row under the buttons. The
     margin override beats the element's own inline margin-left:auto. */
  #seasonal-header{grid-column:1/-1;margin-left:0!important;margin-top:6px}
  #seasonal-header .season-select{width:100%;min-width:0;min-height:44px}
}
.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)}

/* ── PHONE TOUCH TARGETS ──────────────────────────────────────────────────────
   Everything below was between 14px and 34px tall. They are all real controls —
   filters, chips, swatches, modal closes — and a thumb is about 44px, so a
   near-miss means tapping the wrong one or nothing at all. Sizes only; nothing
   here changes what anything does. */
@media (max-width:640px){
  .wsub-btn,
  .mode-tab,
  .wg-chip,
  .feed-filter-btn,
  .recent-chip,
  .vod-action-btn{display:inline-flex;align-items:center;min-height:44px}
  .mode-tab{padding:0 .8rem}
  .wg-chip{padding:0 .85rem}
  .feed-filter-btn{padding:0 14px;font-size:.78rem}
  .recent-chip{padding:0 .75rem;font-size:.82rem}
  .vod-action-btn{padding:0 .9rem}
  #vod-close{min-height:44px;min-width:44px;padding:.3rem .8rem}
  /* The panel close was a bare glyph with 4px of side padding. */
  #customize-panel-close{width:44px;height:44px;display:flex;align-items:center;
    justify-content:center;border-radius:8px;background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.1)}
  .cust-swatch{width:44px;height:44px;border-radius:10px}
  .cust-toggle{width:52px;height:30px}
  .cust-toggle-slider::before{width:24px;height:24px;left:3px;top:3px}
  .cust-toggle input:checked + .cust-toggle-slider::before{transform:translateX(22px)}
  .cust-compact-row{min-height:48px}
  .cust-bg-btn,.cust-card-btn,.cust-avatar-btn,.cust-glass-btn,.cust-avatar-src-btn{min-height:44px}
  /* 16px or iOS zooms the page in on focus and does not zoom back out. The main
     search box is already 16px; these two were missed. */
  .steam-link-row input,
  .cust-url-input{font-size:16px;min-height:44px}
}
/* The delete cross on a recent-search chip is 14px and has to STAY 14px — it
   sits inside the chip next to its own link. So the hit area grows instead of
   the glyph: a transparent pad that is only as big as the gap allows, which is
   the one place a 44px box genuinely cannot fit. */
.recent-chip-del::after{content:'';position:absolute;inset:-11px -9px}

/* 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}
/* The phone rule for #seasonal-header lives with the .tabs-bar grid above —
   it used flex-basis:100% here, which does nothing to a grid item. */

/* 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:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.kd-trend-title{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--fg2);min-width:0}
.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);white-space:nowrap;flex-shrink:0}
.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}
/* Chart labels live here, not in the svg. The svg is preserveAspectRatio="none"
   so the curve can stretch to the panel width; anything with a glyph in it gets
   stretched with it, which on a phone meant text about 2.6x taller than wide.
   These are ordinary HTML, positioned over the plot by percentage, so they keep
   their proportions at every width. */
/* .kd-trend-plot wraps the svg ALONE, so a label's top:N% resolves against the
   plot's own height and lands on its gridline. The x-axis is a sibling below
   it — inside the wrapper its height would stretch the box the percentages are
   measured from, and every y label would drift below the line it belongs to. */
.kd-trend-plot{position:relative}
.kd-trend-plot .kd-y{position:absolute;left:0;font-size:.58rem;line-height:1;
  color:rgba(255,255,255,.28);font-variant-numeric:tabular-nums;
  margin-top:-4px;pointer-events:none}
.kd-trend-plot .kd-last{position:absolute;font-size:.68rem;font-weight:700;line-height:1;
  color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.8);
  pointer-events:none;white-space:nowrap}
.kd-xaxis{position:relative;height:1.1em;margin-top:3px}
.kd-xaxis .kd-x{position:absolute;top:0;font-size:.62rem;line-height:1;
  color:rgba(255,255,255,.34);white-space:nowrap;font-variant-numeric:tabular-nums}
@media (max-width:640px){
  /* The title is long enough to wrap at this width, so stack it above the pill
     rather than letting the two fight over one row. */
  .kd-trend-header{flex-direction:column;align-items:flex-start;gap:7px;margin-bottom:12px}
  .kd-trend-title{font-size:.64rem;letter-spacing:.07em}
  .kd-trend-svg{height:120px}
}

/* 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}
/* width:100% on BOTH columns. The panel is align-items:flex-start, and once it
   turns into a column that governs the cross axis — so a child without an
   explicit width shrink-wraps to its widest content instead of filling the
   panel. .play-cal-right always set it; .play-cal-left never did, so the left
   column sized itself to its own title (~250px inside a ~329px panel) and the
   heatmap was squeezed into whatever was left. That is why the cells stayed
   ~18px after the 12-week clip and the tighter gap: those were dividing up a
   box that was 80px narrower than it looked. With this they land at ~24px. */
@media(max-width:640px){
  .play-calendar-glass{flex-direction:column}
  .play-cal-left{padding-right:0;width:100%}
  .play-cal-right{border-left:none;border-top:1px solid var(--border);padding-left:0;padding-top:16px;width:100%}
}
/* Phone: the heatmap is a 90-day window, so about 14 week columns. Inside the
   panel's 24px side padding with 3px gaps that left ~17px cells — legible, but
   small for something every cell of is a click target with a tooltip. Trimming
   the padding and the gap and dropping to 12 weeks (see _renderPlayCalendar)
   gets them to ~24px. The button below restores the full 90 days. */
@media (max-width:640px){
  .play-calendar-glass{padding:16px 14px}
  .play-cal-inner-grid{gap:2px}
  .play-cal-day-label{font-size:.62rem}
  .play-cal-month-label{font-size:.64rem}
  .play-cal-legend{font-size:.68rem;gap:5px}
  .play-cal-leg-swatch{width:12px;height:12px}
}
/* Shown only on phones, where the grid is clipped to 12 weeks. */
.play-cal-more{display:none}
@media (max-width:640px){
  .play-cal-more{display:flex;align-items:center;justify-content:center;width:100%;
    min-height:44px;margin-top:12px;padding:0 14px;border-radius:8px;
    border:1px solid var(--border);background:var(--glass);color:var(--fg2);
    font-size:.82rem;font-weight:700;font-family:inherit;cursor:pointer;
    transition:background .15s,color .15s}
  .play-cal-more:hover{background:var(--glass-hover);color:var(--fg)}
  .play-cal-more:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
}
.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}
/* Both wide tables scroll sideways correctly on a phone, but nothing said so —
   Match History shows 4 of its 9 columns and just looks truncated. An inset
   shadow on the scroll box reads as "there is more this way"; it is painted on
   the container, so unlike a ::after it does not scroll away with the content.
   It does not retract when you reach the end, which is a fair trade here: at
   phone width these tables always overflow. (#history-table-wrap gets its
   overflow-x inline from stats.js, which is why it is named here and not in a
   grep of this file.) */
@media (max-width:640px){
  .table-scroll,
  #history-table-wrap{box-shadow:inset -15px 0 13px -13px rgba(0,0,0,.75)}
}
.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}
/* Portrait phone: height:min(900px,90vh) handed a 16:9 player a 374x760 box, so
   the video painted ~374x210 and the other ~550px was black. Size the frame to
   the video and let the sheet be as tall as its content — same shape as the
   live-stream popup in shared.css. */
@media (max-width:720px){
  #vod-modal{padding:12px;align-items:flex-start;padding-top:10vh}
  #vod-modal-inner{width:100%;height:auto;max-height:88vh}
  #vod-frame{flex:none;aspect-ratio:16/9;height:auto}
  #vod-detail-panel{flex:none;aspect-ratio:16/9;min-height:0}
  #vod-top-bar,#vod-bottom-bar{padding:8px 10px}
  #vod-bottom-bar{flex-wrap:wrap;gap:8px}
  #vod-bottom-right{flex:1 1 100%}
  #vod-bottom-right .vod-action-btn{flex:1;justify-content:center}
}

/* 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 ──────────────────────────────────────────────────────────
   shared.css owns the bar, the bubbles and the Twitch popup for every page.
   This file used to restate that entire block, and because stats.css loads
   AFTER shared.css it won every conflict — which silently reverted the portrait
   sizing shared.css gives #live-modal-inner on a phone, and ran .live-dot at 2s
   against shared.css's 3.4s, so the same dot breathed at two rates depending on
   which page you were on. Only the genuine page difference stays: this page
   keeps the bar in the layout and fades it in, rather than slide-down from
   display:none, so the content below does not jump when it arrives. */
@keyframes live-bar-fade-in{from{opacity:0}to{opacity:1}}
#live-bar{display:block;opacity:0;pointer-events:none}
#live-bar.live-bar--visible{display:block;opacity:1;pointer-events:auto;animation:live-bar-fade-in .35s ease both}
@media (prefers-reduced-motion:reduce){#live-bar.live-bar--visible{animation:none}}

/* ── 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 ──────────────────────────────────────────────────────── */
/* Was an inline grid-template-columns:1fr 1fr on the panel body, which no media
   query could reach — so on a phone the swatch rows, the toggles and the URL
   fields shared two ~151px columns. As a class it can collapse. */
.cust-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px 32px}
.cust-grid--tight{gap:12px 24px}
@media (max-width:640px){
  .cust-grid{grid-template-columns:1fr;gap:20px}
  .cust-grid--tight{gap:14px}
  #customize-inner{padding:18px 18px 28px;max-height:90dvh}
  /* Two banner-position sliders side by side come to ~155px each on a phone,
     which is not enough travel to place an image by dragging. */
  #banner-pos-controls input[type=range]{min-height:44px}
}
.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}