/* Standings rails: secondary info, but headers still need to read clearly */
.standings-card{background:rgba(255,255,255,.015);border-color:rgba(255,255,255,.06);}
.standings-header{margin-bottom:12px;display:flex;align-items:center;gap:8px;}
.standings-header-left{display:flex;align-items:center;gap:6px;}
.standings-status{margin-left:auto;display:inline-flex;align-items:center;gap:6px;position:relative;top:-3px;}
.live-dot{
  display:inline-block;width:5px;height:5px;border-radius:50%;flex-shrink:0;
  background:var(--accent);opacity:.55;cursor:default;
  animation:pip-pulse 2.4s ease-in-out infinite;
}
/* Shared with the button's three pips further up. */
@keyframes pip-pulse{0%,100%{opacity:.3;transform:scale(.8);}50%{opacity:1;transform:scale(1.3);}}
.standings-header h2{
  margin:0;font-size:.82rem;font-weight:700;color:var(--accent);
  text-transform:uppercase;letter-spacing:.06em;
}
.leaderboard-link{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;
  background:var(--accent-soft);color:var(--accent);
  opacity:.85;
  transition:opacity .15s ease, background .15s ease,
             color .15s ease, box-shadow .15s ease;
}
/* The icon buttons are bare glyphs, so their glow is a drop-shadow
   tracing the outline; inside a filled 22px disc the same filter bleeds
   into its own background. A box-shadow is the body-shaped version, and
   the step to --accent-bright is identical. */
.leaderboard-link:hover{
  opacity:1;
  background:rgba(127,214,242,.28);
  color:var(--accent-bright);
  box-shadow:0 0 10px -1px rgba(127,214,242,.55);
}
.leaderboard-link svg{display:block;}
.standings-grid{display:flex;flex-direction:column;gap:10px;}
.standing-match{border:1px solid rgba(255,255,255,.05);border-radius:10px;padding:9px 10px;}
.standing-match-title{
  display:flex;align-items:center;justify-content:space-between;gap:6px;
  font-size:.72rem;color:var(--text);margin-bottom:6px;font-weight:700;opacity:.9;
}
.standing-side{
  display:flex;flex-direction:column;gap:2px;font-size:.8rem;
  /* Small enough to do nothing on a flat background, but it gives each
     glyph its own edge wherever the photo underneath is busy. */
  text-shadow:0 1px 2px rgba(0,0,0,.6);
}
.standing-side-top{display:flex;align-items:center;gap:7px;}
.standing-vp{margin-left:auto;font-size:.72rem;white-space:nowrap;flex-shrink:0;}
.standing-vp .stat-label{color:#8d97a6;opacity:1;font-weight:400;}
.standing-vp .stat-value{color:#ffffff;font-weight:800;font-size:.85rem;}
/* Read-only marks, so they get the opposite relief to the buttons:
   engraved, not raised. A filled body with a bright top reads as
   pressable, which is a promise the mark cannot keep. */
.movement-indicator{
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;margin-left:7px;flex-shrink:0;
  font-size:1rem;line-height:1;
  vertical-align:middle;cursor:default;
}
/* Saturated rather than merely tinted. At this size the glyph is small
   enough that a muted colour reads as grey, and the whole point of the
   mark is that you catch which way it points without stopping on it. */
.movement-up{
  color:var(--green-ink);text-shadow:0 1px 1px rgba(0,0,0,.85);
  transform:translateY(-6px);
}
.movement-down{
  color:var(--red-ink);text-shadow:0 1px 1px rgba(0,0,0,.85);
  transform:translateY(1px);
}
/* Optical centring: a triangle carries its weight at the base, so the up
   arrow reads low and the down arrow reads high, while the bar is a
   rectangle and reads true - hence transforms on the first two and none
   on it. Set by eye; derived from the glyph's height they came out
   wrong. Keep them small, or on a phone the mark lands on the stats
   line under it. */
/* "Stays" is the absence of movement, so it keeps no hue at all - the
   eye should skip it and land on the two that mean something. */
.movement-bar{
  display:inline-block;width:14px;height:3px;border-radius:1.5px;
  background:#a3adba;box-shadow:0 1px 0 rgba(0,0,0,.55);
}
.standing-side-top .rank-badge{width:20px;height:20px;font-size:.64rem;}
.standing-side-top .dot{width:8px;height:8px;box-shadow:0 0 0 1px rgba(0,0,0,.35);}
/* "Lutgardis Conservatory" is the longest team name in play and used
   to wrap to a second line, which broke the row rhythm down the whole
   rail. It gets the leftover space and shrinks a step rather than
   wrapping; the VP block beside it never shrinks. */
.standing-side-name{
  font-weight:600;color:#f2f6fa;min-width:0;flex:0 1 auto;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
@media (max-width:1499px){
  .standing-side-name{font-size:.96em;}
}
/* Well clear of --muted, and no extra opacity knocked off the
   labels: the grey that reads fine on the page reads thin once it is
   inside a tinted card over a photograph. Same hue, higher tone. */
.standing-side-stats{color:#8d97a6;font-size:.72rem;padding-left:27px;}
/* The label names the number; the number is the point. Both have to
   be legible over the photo, but only one should be loud - so the
   label goes dim and small and the value goes bright and heavy,
   rather than the two sharing a tone. */
.stat-label{color:#8d97a6;opacity:1;font-weight:400;}
.stat-value{color:#f2f6fa;font-weight:700;}
.sep{opacity:.4;margin:0 2px;}
.rank-badge{
  width:26px;height:26px;flex-shrink:0;
  clip-path:polygon(50% 0%, 100% 22%, 100% 68%, 50% 100%, 0% 68%, 0% 22%);
  display:flex;align-items:center;justify-content:center;
  font-size:.78rem;font-weight:800;font-family:Cambria,Georgia,serif;
  background:#0c0f13;border:1px solid var(--border);color:var(--muted);
  /* Anchors the first-place sheen to the badge. Without it the sweep's
     absolutely-positioned box falls back to the card (which is
     positioned for its chamfer) and becomes a card-wide white band. */
  position:relative;
}
.rank-1{background:linear-gradient(160deg,#fff3c4,#c99a2e 65%);color:#3a2a05;}
.rank-2{background:linear-gradient(160deg,#eef2f7,#a9b4c0 65%);color:#22262c;}
.rank-3{background:linear-gradient(160deg,#f0c9a0,#a9673a 65%);color:#2b1704;}

/* Shared base for small icon-only buttons (guild list, K/D, activity).
   Each subclass below only sets width/height/color. */
.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:0;margin-left:1px;flex-shrink:0;line-height:1;
  background:none;border:none;box-shadow:none;text-shadow:none;
  opacity:.95;cursor:pointer;
  transition:opacity .15s ease, transform .15s ease, color .15s ease;
}
/* Rest is --accent, hover is --accent-bright, on every one of them.
   The lift alone said "this moved", never "this is lit" - and the icons
   were spending the bright cyan at rest, leaving nothing for the
   hover. */
.icon-btn:hover,.icon-btn.active{
  opacity:1;transform:scale(1.15);color:var(--accent-bright);
}
/* An icon can only be relieved along its outline. The offset is what
   makes it safe: a drop-shadow with no offset spreads evenly and closes
   into a disc at this size. Pushed straight down with almost no blur,
   it traces the shape instead. */
.icon-btn svg{
  display:block;
  filter:drop-shadow(0 1px .5px rgba(0,0,0,.65));
  transition:filter .15s ease;
}
/* The halo, spent on hover only. Held at rest it read as a permanent
   disc around a 14px glyph; with an unlit state either side of it, the
   same blur reads as the thing lighting up. The offset shadow stays
   first so the glyph keeps its outline against the photo. */
.icon-btn:hover svg,.icon-btn.active svg{
  filter:drop-shadow(0 1px .5px rgba(0,0,0,.65))
         drop-shadow(0 0 4px rgba(127,214,242,.45));
}
/* The three small ones get more of it. A glow is spent on an outline,
   so the same blur on a 14px glyph covers a fraction of the ink a 19px
   one does. Matched by eye against the shield, not by arithmetic. */
.map-kd-btn:hover svg,.map-kd-btn.active svg,
.activity-btn:hover svg,.activity-btn.active svg,
.activity-info-btn:hover svg,.activity-info-btn.active svg{
  filter:drop-shadow(0 1px .5px rgba(0,0,0,.65))
         drop-shadow(0 0 6px rgba(127,214,242,.72));
}
.icon-btn:active{transform:translateY(1px) scale(1.05);}

/* No chip. The chip was an attempt to make this look pressable, and it
   did - at the cost of being the only button on the page with a body.
   Accent colour and the shared hover lift do the same job in the same
   language as the rest. */
.tier-map-btn{height:18px;gap:2px;color:var(--accent);}
/* Reads brighter than the other cyan glyphs at rest because it carries
   more ink - largest at 18px, with an outline enclosing the whole box -
   and it sits next to a muted grey word rather than a lit number. Pulled
   back on opacity, not hue: a duller cyan would stop meaning "you can
   touch it". This is the number to change if it still sits wrong. */
.tier-map-btn svg{
  width:18px;height:18px;
  opacity:.82;
  transition:opacity .15s ease, filter .15s ease;
}
.tier-map-btn:hover svg,.tier-map-btn.active svg{opacity:1;}
/* Same as .stat-label on purpose - that is what "Skirmish" is. The size
   is fixed rather than inherited because the button appears at .72rem in
   the standings card and .95rem in the panel header. */
.tier-map-label{
  font-size:.64rem;font-weight:400;color:#8d97a6;
  line-height:1;
  /* Optical, not geometric. Flex centres the label's box, but "Maps" has
     a descender, so its ink sits high inside that box. Nudged down until
     the cap height lands on the glyph's centre. */
  transform:translateY(1px);
}
/* The word is what lights up. The glyph is already accent and has its
   own brighten below, so the control answers as one piece. */
.tier-map-btn:hover .tier-map-label,
.tier-map-btn.active .tier-map-label{color:var(--text);}
/* The shared 1.15 lift is sized for a bare 17px glyph; on a word it
   reads as the text going soft rather than as the control rising. */
.tier-map-btn:hover,.tier-map-btn.active{
  color:var(--accent-bright);transform:scale(1.06);
}

/* Community guild list: small icon next to NA server names, opens a popover */
.server-guilds-btn{width:19px;height:21px;color:var(--accent);}
/* Pulled back over the row's 7px gap. That gap is right between the
   badge, the dot and the name, but the shield belongs to the name it
   sits beside, not to the row. */
.standing-side-top .server-guilds-btn{margin-left:-5px;}
/* The one opaque surface on the page. At 92-94% the Check button still
   read through it, and no amount of blur fixes a large bright shape
   behind small text. Opaque retires the backdrop-filter too. */
.info-popover{
  position:fixed;z-index:60;width:280px;max-height:min(340px, 70vh);overflow-y:auto;
  background:linear-gradient(180deg, #232a34, #151a21 62%);
  border:1px solid #333c48;
  border-top-color:rgba(255,255,255,.17);
  border-radius:10px;padding:12px 14px;font-size:.8rem;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.5),
    0 18px 44px -12px rgba(0,0,0,.85);
}
/* Guild/alliance list only: often long, so it gets more default room and
   a manual resize handle. The other popovers stay compact. */
.info-popover--guilds{width:300px;max-height:85vh;min-height:120px;resize:vertical;}
.info-popover-header{
  display:flex;align-items:center;justify-content:space-between;
  font-weight:700;color:var(--text);margin-bottom:8px;gap:4px;
}
.info-popover-header-actions{display:flex;align-items:center;gap:2px;flex-shrink:0;}
.info-popover-close{
  background:none;border:none;box-shadow:none;color:var(--muted);
  font-size:1.5rem;line-height:1;cursor:pointer;padding:0 4px;
  text-shadow:0 1px 1px rgba(0,0,0,.6);
}
.info-popover-close:hover{color:var(--text);}
.info-popover-expand{
  display:inline-flex;align-items:center;justify-content:center;
  background:none;border:none;box-shadow:none;text-shadow:none;
  color:var(--muted);cursor:pointer;padding:2px;
  border-radius:4px;
}
.info-popover-expand:hover{color:var(--text);background:rgba(255,255,255,.06);}
.info-popover-expand svg{display:block;filter:drop-shadow(0 1px .5px rgba(0,0,0,.6));}
/* Expanded (screenshot) mode: centered modal with a dimming backdrop. */
.info-popover-backdrop{
  position:fixed;inset:0;z-index:59;background:rgba(4,6,9,.65);
  -webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);
}
.info-popover--expanded{
  position:fixed;z-index:61;
  left:50% !important;top:50% !important;
  transform:translate(-50%,-50%);
  width:min(880px,92vw);max-width:92vw;
  max-height:88vh;resize:none;
}
.info-popover--expanded .info-popover-body{
  display:flex;flex-direction:column;gap:16px;
}
/* Column containers are built in JS (see layoutAllianceGrid), which
   measures real card heights and bin-packs them. These rules just
   style whatever columns the script builds. */
.info-popover--expanded .alliance-grid{
  display:flex;gap:12px;align-items:flex-start;
}
.info-popover--expanded .alliance-grid-col{
  display:flex;flex-direction:column;gap:12px;flex:1 1 0;min-width:0;
}
.info-popover--expanded .alliance-block{
  margin-bottom:0;background:rgba(255,255,255,.03);
  border:1px solid var(--border);border-radius:8px;padding:8px 10px;
}
.info-popover-section-title{
  font-size:.72rem;font-weight:800;color:var(--muted);
  text-transform:uppercase;letter-spacing:.08em;
  margin:12px 0 6px;padding-bottom:4px;border-bottom:1px solid var(--border);
}
.info-popover-section-title:first-of-type{margin-top:0;}
.alliance-block{margin-bottom:10px;}
.alliance-name{font-weight:700;color:var(--blue);margin-bottom:2px;}
.guild-list{display:flex;flex-direction:column;gap:1px;}
.alliance-block .guild-list{padding-left:10px;}
.guild-line{line-height:1.5;}
.guild-tag{font-weight:700;color:var(--accent);}
.guild-region{color:var(--muted);opacity:.75;}
.info-popover-footer{
  color:var(--muted);font-size:.7rem;margin-top:10px;
  padding-top:8px;border-top:1px solid var(--border);line-height:1.5;
}

/* Per-map K/D breakdown: small crossed-swords icon next to the K/D value */
.map-kd-btn{width:15px;height:16px;color:var(--accent);vertical-align:middle;}
.map-kd-label--gbl,.pop-bar-label.map-kd-label--gbl{color:var(--green-ink);}
.map-kd-label--bbl,.pop-bar-label.map-kd-label--bbl{color:var(--blue);}
.map-kd-label--rbl,.pop-bar-label.map-kd-label--rbl{color:var(--red-ink);}
/* EBG is nobody's map, so it takes a colour no team owns: the lockout
   banner's amber. Not cyan - cyan on this page means something you can
   touch. Three team colours across three letters was tried: blended it
   washes out, split it reads as a ransom note. */
.map-kd-label--ebg,.pop-bar-label.map-kd-label--ebg{color:var(--warn);}

/* The skirmish-score chart and the buttons that open these popovers.
   One rule for the chart, not two: the height used to be set here and
   overridden forty lines below, so editing the first one did nothing. */
.activity-btn,.activity-info-btn{width:14px;height:15px;color:var(--accent);vertical-align:middle;}
.activity-chart{width:100%;height:132px;display:block;margin-top:2px;}
/* A colour means a team. The chosen side used to be drawn in cyan,
   which broke that - the legend said green and the line said accent.
   It is in its own colour now, told apart by weight. */
.activity-line{fill:none;stroke-width:2.4;}
.activity-line--red{stroke:var(--red);}
.activity-line--blue{stroke:var(--blue);}
.activity-line--green{stroke:var(--green);}
.activity-dot--red{fill:var(--red);}
.activity-dot--blue{fill:var(--blue);}
.activity-dot--green{fill:var(--green);}
.activity-dot{stroke:rgba(10,13,17,.85);stroke-width:1.2;}
/* The popovers that carry a chart or a breakdown, rather than three
   lines of text: they get room the compact ones do not need. */
.info-popover--trend{
  width:430px;max-height:min(680px, 88vh);padding:14px 17px;
}
.info-popover--data{width:470px;max-height:min(560px, 86vh);padding:13px 16px;}
@media (max-width:520px){ .info-popover--data{width:calc(100vw - 24px);} }
/* On a narrow screen it takes the width it can get rather than
   overflowing it. */
@media (max-width:520px){ .info-popover--trend{width:calc(100vw - 24px);} }

/* Headline figures, label over value. The base is two columns; every
   popover on the page uses the three-column variant under it. */
.pop-figures{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px;}
.pop-figures--three{grid-template-columns:repeat(3,1fr);gap:8px;}
.pop-figures--three .pop-figure{padding:8px 9px;}
.pop-figures--three .pop-figure-value{font-size:1.05rem;}
.pop-figure{
  border:1px solid var(--border);border-top-color:rgba(255,255,255,.12);
  border-radius:8px;padding:9px 12px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.14));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.pop-figure-label{
  display:block;font-size:.62rem;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.08em;margin-bottom:1px;
}
.pop-figure-value{font-size:1.2rem;color:var(--text);font-variant-numeric:tabular-nums;}
/* K/D is the only figure that takes a tone, and it is the same figure
   the cards outside carry - so the same green and red, down to the value.
   It used to be --ok and --err, which put three reds on screen for one
   number. */
.pop-figure--good .pop-figure-value{color:var(--green-ink);}
.pop-figure--bad .pop-figure-value{color:var(--red-ink);}


/* The other two sides, for scale. Thin and dim on purpose: they are
   there to say whether a dip was this server or the whole tier. */
.trend-line{fill:none;stroke-width:1.4;opacity:.6;}
.trend-line--red{stroke:var(--red);}
.trend-line--blue{stroke:var(--blue);}
.trend-line--green{stroke:var(--green);}
/* The axis is fitted to the week, so the numbers have to be shown. */
.trend-grid{stroke:rgba(255,255,255,.08);stroke-width:1;}
/* One tick per day of the week, so a point on the line can be placed. */
.trend-day{stroke:rgba(255,255,255,.055);stroke-width:1;}
.trend-day-label{font-size:8px;opacity:.7;}
.trend-scale{fill:var(--muted);font-size:9.5px;font-variant-numeric:tabular-nums;}

.trend-legend{
  display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:11px;
  font-size:.73rem;color:var(--muted);
}
.trend-legend-item{display:inline-flex;align-items:center;gap:5px;}
.trend-legend-item.is-mine{color:var(--text);font-weight:700;}
.trend-legend-val{color:var(--text);font-variant-numeric:tabular-nums;}
.trend-legend-dot{width:8px;height:2.5px;border-radius:2px;flex-shrink:0;}
.trend-legend-dot--red{background:var(--red);}
.trend-legend-dot--blue{background:var(--blue);}
.trend-legend-dot--green{background:var(--green);}

/* The block still being played, reported rather than plotted. */
.trend-live{
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  flex-wrap:wrap;margin-top:13px;padding:9px 12px;border-radius:8px;
  background:rgba(127,214,242,.09);border:1px solid rgba(127,214,242,.2);
  font-size:.72rem;color:var(--muted);
}
.trend-live b{color:var(--text);font-variant-numeric:tabular-nums;}
.trend-live-head{display:inline-flex;align-items:center;gap:6px;color:var(--accent);font-weight:700;}
.trend-live-dot{
  width:6px;height:6px;border-radius:50%;background:var(--accent);
  flex-shrink:0;animation:pip-pulse 2.4s ease-in-out infinite;
}

/* Where the last finished block's points came from. */
.pop-section{
  display:flex;align-items:baseline;gap:11px;
  margin:16px 0 4px;font-size:.66rem;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.08em;
}
.pop-section-title{flex:1 1 auto;min-width:0;}
/* The column words, on the heading's own line. A size down from it, and
   each one carrying its column's width from the rows below - which is
   what puts a word over its own number instead of near it. */
.pop-section .pop-bar-value,.pop-section .pop-bar-pct,
.pop-section .pop-kd-kills,.pop-section .pop-kd-deaths{
  color:var(--muted);font-size:.6rem;font-weight:700;letter-spacing:.07em;
}
.pop-section .pop-kd-nums{flex:0 0 auto;}
.pop-bar-row{display:flex;align-items:center;gap:11px;padding:5px 0;font-size:.78rem;}
.pop-bar-label{font-weight:700;flex:0 0 68px;}
/* Wide enough for the longest team name there is - Lutgardis
   Conservatory, 22 characters - so the ellipsis is the exception and
   not the rule. */
.pop-bar-label--wide{
  flex:0 0 146px;color:var(--text);font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* The row you opened, marked as a row - a rail and a tint in the page's
   own accent rather than a colour that would claim to be a team. The
   negative margin is paid back by the padding, so the label still starts
   where the other rows' labels start. */
.pop-bar-row.is-mine{
  margin:0 -8px;padding:5px 8px;border-radius:6px;
  background:rgba(127,214,242,.07);
  box-shadow:inset 2px 0 0 var(--accent);
}
.pop-bar-track{
  flex:1 1 auto;height:9px;border-radius:5px;
  background:rgba(255,255,255,.07);overflow:hidden;
  box-shadow:inset 0 1px 1px rgba(0,0,0,.4);
}
.pop-bar-fill{display:block;height:100%;border-radius:5px;}
.pop-bar-fill.own-red{background:var(--red);}
.pop-bar-fill.own-blue{background:var(--blue);}
.pop-bar-fill.own-green{background:var(--green);}
.pop-bar-value{
  flex:0 0 50px;text-align:right;color:var(--text);font-weight:700;
  font-variant-numeric:tabular-nums;
}
.pop-bar-pct{flex:0 0 36px;text-align:right;color:var(--muted);font-variant-numeric:tabular-nums;}
/* The number the rows add up to, at the foot of the column they add up
   in - the eye goes down the values adding them, and the total closes
   it. Beside the heading it had nothing to line up with. */
/* Baseline, not centre: the label is .66rem and the number .78rem, and
   centring two different sizes leaves their baselines a pixel apart -
   which reads as the number sitting low. The empty track has no text to
   have a baseline, so it keeps centring. */
.pop-bar-total{
  align-items:baseline;
  margin-top:6px;padding:4px 0 0;border-top:1px solid var(--border);
}
.pop-bar-total .pop-bar-label{
  color:var(--muted);font-size:.66rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;
}
.pop-bar-total .pop-bar-track{background:none;box-shadow:none;align-self:center;}

/* Five things in this row and nothing may wrap. The numbers are sized
   to their content and grouped; the bar takes what is left, which is
   why it ends up the widest thing here. */
.pop-kd-row{gap:10px;white-space:nowrap;}
.pop-kd-row .pop-bar-label{flex:0 0 62px;}
.pop-bar-track--slim{flex:1 1 auto;min-width:40px;height:8px;}
.pop-kd-nums{flex:0 0 auto;display:inline-flex;align-items:center;gap:11px;}
.pop-kd-kills,.pop-kd-deaths{
  width:66px;text-align:right;color:var(--text);font-weight:700;
  font-variant-numeric:tabular-nums;
  display:inline-flex;align-items:center;justify-content:flex-end;gap:4px;
}
.pop-kd-ratio{width:38px;text-align:right;font-weight:700;}
/* The words over the three numbers, on the same grid as the rows so
   each sits above what it names. The label and track slots are empty
   and are here to hold the columns, not to draw anything. */
/* Vector, not emoji - the two came from different system fonts, each
   with its own ascent. The nudge is not a fudge: align-items:center puts
   the icon's middle 0.414em above the baseline in Segoe UI, while digits
   have no descender and centre at 0.35em. That 0.064em is why a centred
   icon reads as floating above the number. */
.glyph-sword,.glyph-skull{
  display:block;flex:0 0 auto;opacity:.85;
  transform:translateY(0.064em);
}

@media (max-width:520px){
  .pop-bar-label--wide{flex:0 0 108px;}
  .pop-kd-row{gap:7px;}
  .pop-kd-row .pop-bar-label{flex:0 0 52px;}
  .pop-kd-nums{gap:8px;}
  .pop-kd-kills,.pop-kd-deaths{width:60px;}
}
.activity-axis{display:flex;justify-content:space-between;font-size:.66rem;color:var(--muted);margin-top:3px;}
.activity-note{color:var(--muted);font-size:.72rem;margin-top:14px;line-height:1.55;}

/* Skirmish score bar: current-skirmish score relative to the tier leader */
.skirmish-bar-row{display:flex;align-items:center;gap:6px;margin-top:5px;}
.skirmish-bar-track{flex:1;height:4px;background:var(--border);border-radius:2px;overflow:hidden;}
.skirmish-bar-fill{height:100%;border-radius:2px;transition:width .3s ease;}
.skirmish-bar-pct{font-size:.66rem;color:#8d97a6;min-width:26px;text-align:right;flex-shrink:0;}
.skirmish-bar-red{background:var(--red);}
.skirmish-bar-blue{background:var(--blue);}
.skirmish-bar-green{background:var(--green);}

/* K/D value colored by who's winning the fight stat */
.kd-good{color:var(--green-ink)!important;}
.kd-bad{color:var(--red-ink)!important;}
.stat-leader{
  text-decoration:underline;
  text-decoration-color:var(--accent);text-underline-offset:3px;
}