/* The quick look (quicklook.js). Two parts:
   - the bar on top, the site's own: the sample or your replays, and the
     buttons that pick them;
   - the page under it (.qa), drawn as the app draws its You pages: the
     app's own colors (static/style.css :root and theme.js's light Melee
     Menu) and its own rules, copied from static/style.css, stats.css,
     profile.css and games.css with .qa in front. Keep them in step with
     the app's when those change. */

/* --- the bar ---------------------------------------------------------------------- */
.ql-bar {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 24px;
  padding: 18px 22px; border-radius: var(--r); border: 1px solid var(--line); background: var(--panel);
}
.ql-src { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; min-width: 0; }
.ql-label { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-weight: 700; font-size: 18px; min-width: 0; }
.ql-tag { font: 700 12px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; padding: 6px 9px;
  border-radius: 6px; color: var(--on-gold); background: var(--gold); }
.ql-tag.mine { color: var(--gold-text); background: none; border: 1px solid color-mix(in srgb, var(--gold) 55%, var(--line)); }
.ql-players .seg { font-size: 14px; padding: 8px 16px; }
.ql-acts { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.ql-hint { grid-column: 1 / -1; color: var(--muted); font-size: var(--t-small); }
.ql-bar .progress { grid-column: 1 / -1; display: grid; gap: 8px; }
.progress-track { height: 6px; border-radius: 6px; background: var(--line); overflow: hidden; }
.progress-track span { display: block; height: 100%; width: 0; background: var(--gold); transition: width .2s; }
.progress p { color: var(--muted); }

.results { margin-top: 20px; display: grid; gap: 20px; }
.results:empty { display: none; }
.stock { width: 24px; height: 24px; flex: none; image-rendering: auto; }

.teaser {
  display: grid; grid-template-columns: 1fr auto; gap: 16px 28px; align-items: center;
  padding: 24px 28px; border-radius: var(--r); background: var(--gold); color: var(--on-gold);
}
.teaser b { font: 800 22px/1.2 var(--display); letter-spacing: -.01em; }
.teaser p { opacity: .8; margin-top: 4px; max-width: 60ch; }
.teaser .btn { background: var(--on-gold); color: var(--gold); }
.teaser b { font-size: 20px; }
#readMore { justify-self: start; }

/* the page's own hover: what a badge or a number means */
.qtip { position: absolute; z-index: 60; max-width: min(340px, calc(100vw - 16px)); padding: 10px 12px; border-radius: 10px;
  background: var(--tip-bg, #1c1c26); border: 1px solid var(--line); box-shadow: 0 12px 30px -10px var(--shadow, #000); display: grid; gap: 4px;
  font-size: 13px; line-height: 1.45; color: var(--text); pointer-events: none; }
.qtip p:first-child { font-weight: 700; }
.qtip p + p { color: var(--muted); }
[data-tip] { cursor: help; }
[data-tip]:focus-visible { outline: 2px solid var(--gold-text); outline-offset: 2px; }

@media (max-width: 860px) {
  .ql-bar { grid-template-columns: 1fr; padding: 18px; }
  .ql-acts { justify-content: flex-start; gap: 8px; }
  .ql-acts .btn { padding: 8px 16px; font-size: 14px; }
  .teaser { grid-template-columns: 1fr; }
}

/* --- the app's page ----------------------------------------------------------------- */
/* Melee Menu, dark (static/style.css :root, games.css's badge tiers) */
.qa {
  --bg: #101014; --bg-2: #17171d; --panel: #1c1c24; --panel-2: #272733; --line: #34344a;
  --text: #f2f2f2; --muted: #9a9aae; --accent: #f0b429; --on-accent: #101014;
  --good: #6fdc8c; --bad: #ff7a7a; --warn: #e0a030;
  --tier-common: #aab0c2; --tier-uncommon: #5fd38d; --tier-rare: #4da3ff;
  --tier-epic: #b37cff; --tier-legendary: #ffb52e; --tier-ultra: #ff5fa2;
  --radius: 10px; --sp-2: 8px; --gap-label: 8px; --gap-head: 12px;
  color-scheme: dark;
}
/* Melee Menu, light (theme.js: LIGHT and light('#9c6616'); games.css) */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .qa {
    --bg: #f4f5f8; --bg-2: #e9ebf1; --panel: #ffffff; --panel-2: #eceff5; --line: #d5d9e3;
    --text: #15171d; --muted: #5f6675; --accent: #9c6616; --on-accent: #ffffff;
    --good: #1f8f4a; --bad: #c53030; --warn: #b7791f;
    --tier-common: #6b7085; --tier-uncommon: #1f9d57; --tier-rare: #1f6fd1;
    --tier-epic: #7d3fe0; --tier-legendary: #c77800; --tier-ultra: #d6246e;
    color-scheme: light;
  }
}
:root[data-theme="light"] .qa {
  --bg: #f4f5f8; --bg-2: #e9ebf1; --panel: #ffffff; --panel-2: #eceff5; --line: #d5d9e3;
  --text: #15171d; --muted: #5f6675; --accent: #9c6616; --on-accent: #ffffff;
  --good: #1f8f4a; --bad: #c53030; --warn: #b7791f;
  --tier-common: #6b7085; --tier-uncommon: #1f9d57; --tier-rare: #1f6fd1;
  --tier-epic: #7d3fe0; --tier-legendary: #c77800; --tier-ultra: #d6246e;
  color-scheme: light;
}

/* the page itself: the app's type (style.css body) on its own background */
.qa {
  background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: var(--r);
  font: 15px/1.4 "Maven Pro", "Segoe UI", system-ui, sans-serif; overflow: hidden; min-width: 0;
}
.qa h2, .qa h3, .qa h4 { font-family: inherit; text-wrap: balance; }
.qa .muted { color: var(--muted); }
.qa .small { font-size: 12px; }
.qa .empty { color: var(--muted); padding: 40px; text-align: center; }
.qa .stock { width: 20px; height: 20px; }
/* (the site's img max-width: 100% let a table cell count its icon as 0px wide) */
.qa img.stock { max-width: none; }

/* the toolbar (style.css .toolbar): the characters */
.qa-tools {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px 28px; padding: 14px 20px;
  border-bottom: 1px solid var(--line);
}
/* Compared With (stats.css .statshead), over the cards it changes */
.qa-ranked { display: flex; flex-direction: column; gap: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.qa-cmp { display: flex; align-items: center; flex-wrap: wrap; gap: var(--gap-label); min-width: 0; }
.qa-cmp > .muted { white-space: nowrap; }
/* a new range: the numbers it changed light up once */
@keyframes qaflash {
  from { background-color: color-mix(in srgb, var(--accent) 30%, transparent); }
  to { background-color: transparent; }
}
.qa .flash { animation: qaflash 1.1s ease-out; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { .qa .flash { animation: none; } }
.qa .chips { display: flex; flex-wrap: wrap; gap: 4px; }
.qa-body { padding: 16px 20px 24px; display: flex; flex-direction: column; gap: 16px; }
.qa-note { padding: 0 2px; }

/* chips (style.css .fchip, .execchars) */
.qa .fchip {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px 2px 3px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; font-size: 12px;
  color: var(--muted); font-family: inherit; cursor: pointer;
}
.qa .fchip img { width: 20px; height: 20px; }
.qa .fchip.txt { padding: 3px 9px; }
.qa .fchip span { font-variant-numeric: tabular-nums; }
.qa .fchip:hover { border-color: var(--accent); }
.qa .fchip.on { background: color-mix(in srgb, var(--accent) 25%, var(--bg-2)); border-color: var(--accent); color: var(--text); }
.qa .execchars { display: flex; flex-wrap: wrap; gap: 6px; }
.qa .execchar { padding: 3px 9px 3px 4px; font-size: 13px; }
.qa .execchar img { width: 24px; height: 24px; }
.qa .execchar .execname { font-weight: 600; margin-left: 2px; }

/* the (i) (style.css .info) */
.qa .info {
  display: inline; padding: 0 5px; width: 14px; height: 14px; line-height: 12px; text-align: center;
  margin: 0 2px 0 var(--gap-label); vertical-align: 1px;
  border: 1px solid currentColor; border-radius: 50%;
  color: var(--muted); opacity: .55; cursor: help;
  font: 600 10px/1 ui-sans-serif, system-ui, sans-serif; font-style: italic; user-select: none;
  text-transform: none; letter-spacing: 0;
}
.qa .info:hover, .qa .info:focus-visible { opacity: 1; color: var(--accent); outline: none; }
.qa h2 .info { vertical-align: 1px; }
.qa-cmp > .info, .qa .exechead > .info { margin-left: 2px; }

/* a panel (style.css .panel, its rhythm) */
.qa .panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; min-width: 0;
}
.qa .panel h2 { margin: 0 0 12px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.qa .panel > * + * { margin-top: 10px; }
.qa .panel > h2 + * { margin-top: 0; }
.qa .youhead { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: var(--gap-head); }
.qa .youhead > h2 { margin: 0; }
.qa .panel > .youhead + * { margin-top: 0; }

/* the sections and their card grids (stats.css) */
.qa .statssec { margin: 2px 0 0; }
.qa .statssech { font-size: 15px; margin: 0 0 10px; color: var(--text); }
/* The card grids. The app lays its cards out as a masonry wall on a page
   1320px wide; here the column is narrower and a section has two to four
   cards, so the layout is picked by how many there are and how wide the
   page is (.qa-body is the container), never leaving a card alone in a row
   or a hole beside a tall one:
   - one column on a phone (the page under about 560px);
   - two columns: two or four cards in pairs, a third card across both;
     with the tall Tech card, it takes the right column and the others
     stack on the left;
   - wider: three or four across, cards in a row as tall as the row. The
     Tech card keeps its column on the right, the others stacked beside it. */
.qa-body { container: qabody / inline-size; }
.qa .statsgrid, .qa .statsfacts { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: stretch; }
.qa .statsgrid > *, .qa .statsfacts > * { min-width: 0; }
@container qabody (min-width: 520px) {
  .qa .qa-cards:not([data-n="1"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qa .qa-cards[data-n="3"]:not([data-tall]) > :last-child { grid-column: 1 / -1; }
  .qa .qa-cards[data-tall] > .tall { grid-column: 2; grid-row: 1 / span 2; }
  .qa .qa-cards[data-tall][data-n="2"] > .tall { grid-row: 1; }
}
@container qabody (min-width: 700px) {
  .qa .statsfacts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* (three across once each card has about 260px: "19% punished" on one line) */
@container qabody (min-width: 820px) {
  .qa .qa-cards[data-n="3"]:not([data-tall]) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .qa .qa-cards[data-n="3"]:not([data-tall]) > :last-child { grid-column: auto; }
}
@container qabody (min-width: 1060px) {
  .qa .qa-cards[data-n="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}


/* a card (style.css .execcard, .exechead, .execbig, .execsub) */
.qa .execcard {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 14px 10px; display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.qa .exechead {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; letter-spacing: .04em; color: var(--muted); text-transform: uppercase;
}
.qa .execbig { font-size: 32px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.qa .execsub { font-size: 14px; color: var(--muted); }
.qa .execsub b { color: var(--text); }
.qa .statscard .exechead { margin-bottom: 0; }
.qa .statscard > * + * { margin-top: 4px; }

/* the line under a number: the difference and the range's own (stats.css) */
.qa .statsdiff { font-variant-numeric: tabular-nums; font-weight: 700; }
.qa .statsdiff.up { color: var(--good); }
.qa .statsdiff.down { color: var(--bad); }
.qa .statsfield { display: flex; align-items: baseline; gap: 6px; margin: 4px 0 2px; flex-wrap: wrap; }
.qa .statsfieldv { font-variant-numeric: tabular-nums; color: var(--muted); }

/* rows with a bar (style.css .techafter, stats.css .statsbar) */
.qa .techafter { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.qa .techafter > h4 {
  margin: 0 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
.qa .techafter .tarow {
  display: grid; grid-template-columns: minmax(0, 11.5em) minmax(40px, 1fr) auto;
  align-items: center; gap: 8px; font-size: 13px;
}
.qa .techafter .tarow.plain { grid-template-columns: minmax(0, 1fr) auto; }
.qa .execbar { height: 8px; background: var(--panel-2); border-radius: 4px; overflow: hidden; position: relative; }
.qa .execbar i { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.qa .techafter .val { text-align: right; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.qa .techafter .taslid { border-top: 1px solid var(--line); padding-top: 6px; margin-top: 2px; }

.qa .statssplit { margin-top: 10px; }
.qa .statsbars { display: grid; gap: 4px; margin: 4px 0 2px; }
.qa .statsbar { display: grid; grid-template-columns: 8.5em 1fr 3em auto; gap: 8px; align-items: center; }
.qa .statsbar .name { font-size: 12px; color: var(--muted); }
.qa .statsbar .val { font-variant-numeric: tabular-nums; text-align: right; font-weight: 700; }
.qa .statsfact .execsub { margin: 2px 0 6px; }
.qa .statsfact .statsbar.thin { opacity: .55; }
.qa .statsfact > b + .info { margin-left: var(--gap-label); }

/* the player and their record (stats.css .statsopp) */
.qa .statsopp { display: flex; flex-direction: column; gap: 18px; padding: 18px 20px 20px; container-type: inline-size; overflow: hidden; }
.qa .statsopp > * { margin: 0; }
.qa .statsopp .W { color: var(--good); }
.qa .statsopp .L { color: var(--bad); }
.qa .sotop { display: flex; align-items: center; gap: 18px; min-width: 0; }
.qa .soicon {
  flex: none; width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--accent) 22%, var(--panel-2)) 0%, var(--panel-2) 70%);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
}
.qa .soicon img { width: 54px; height: 54px; }
.qa .sowho { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.qa .soname { font-size: 24px; font-weight: 800; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qa .soname .code { color: var(--muted); font-weight: 500; margin-left: 1px; }
.qa .sorec { display: flex; align-items: center; gap: 12px 24px; flex-wrap: wrap; }
.qa .sorecnum { display: flex; align-items: baseline; gap: 4px; font-size: 38px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.qa .sowon { display: flex; flex-direction: column; gap: 6px; min-width: 120px; flex: 1 1 120px; max-width: 200px; }
.qa .sowinbar { display: block; height: 8px; width: 100%; border-radius: 4px; overflow: hidden;
  background: color-mix(in srgb, var(--bad) 55%, var(--panel-2)); }
.qa .sowinbar span { display: block; height: 100%; background: var(--good); }
.qa .sorecent { display: flex; flex-direction: column; gap: 6px; margin-left: auto; }
.qa .sostrip { display: flex; gap: 5px; flex-wrap: wrap; }
.qa .sopip {
  width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center;
  font-size: 11px; font-weight: 800; color: var(--muted); background: var(--panel-2); border: 1px solid var(--line);
}
.qa .sopip.W { color: var(--good); background: color-mix(in srgb, var(--good) 14%, var(--panel));
  border-color: color-mix(in srgb, var(--good) 45%, var(--line)); }
.qa .sopip.L { color: var(--bad); background: color-mix(in srgb, var(--bad) 14%, var(--panel));
  border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); }
.qa .solab { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.qa .sostats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 20px;
  padding-top: 16px; border-top: 1px solid var(--line);
}
.qa .sostat { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.qa .soval { display: flex; align-items: center; gap: 6px; font-size: 20px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
@container (max-width: 560px) {
  .qa .sostats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qa .sorecent { margin-left: 0; }
}

/* a badge's chip, in its rarity's color (games.css) */
.qa .gbadges { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.qa .gbadge {
  --t: var(--tier-common);
  display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; line-height: 1.3;
  padding: 2px 10px; border-radius: 999px; white-space: nowrap; color: var(--text); max-width: 100%;
  border: 1px solid color-mix(in srgb, var(--t) 75%, transparent);
  background: color-mix(in srgb, var(--t) 14%, var(--panel));
}
.qa .gbadge[data-rarity="uncommon"] { --t: var(--tier-uncommon); }
.qa .gbadge[data-rarity="rare"] { --t: var(--tier-rare); }
.qa .gbadge[data-rarity="epic"] { --t: var(--tier-epic); }
.qa .gbadge[data-rarity="legendary"] { --t: var(--tier-legendary); }
.qa .gbadge[data-rarity="ultra"] { --t: var(--tier-ultra); }
.qa .gbadge[data-rarity]:not([data-rarity="common"]):not(.rough) { color: color-mix(in srgb, var(--t) 55%, var(--text)); }
.qa .gbadge[data-rarity="legendary"]:not(.rough) { border-width: 1.5px; box-shadow: 0 0 8px color-mix(in srgb, var(--t) 40%, transparent); }
.qa .gbadge[data-rarity="ultra"]:not(.rough) { border-width: 1.5px;
  background: linear-gradient(110deg, color-mix(in srgb, var(--tier-ultra) 28%, var(--panel)),
    color-mix(in srgb, var(--tier-legendary) 24%, var(--panel)));
  box-shadow: 0 0 12px color-mix(in srgb, var(--tier-ultra) 55%, transparent); }
.qa .gbadge.rough { --t: var(--bad); color: var(--text); }
.qa .gbadge.plain { border-color: var(--line); background: var(--panel); color: var(--muted); }
.qa .gbadge .ic { font-size: 12px; color: var(--bad); }
.qa .gbadge .n { font-variant-numeric: tabular-nums; opacity: .8; font-weight: 600; }

/* By Matchup and Stage (profile.css): the number is in every cell, the color
   only repeats it */
.qa .youheatp { display: flex; flex-direction: column; gap: 10px; }
.qa .youheatp > * + * { margin-top: 0; }
.qa .youlegend { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.qa .youlegend i { display: inline-block; width: 18px; height: 12px; border-radius: 3px; border: 1px solid var(--line); }
/* too few ranked numbers at the band picked (profile.css .youthin) */
.qa .youthin { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; color: var(--warn, #e0a030);
  border-left: 2px solid var(--warn, #e0a030); padding: 2px 0 2px 10px; font-weight: 600; }
/* the words take the room left and wrap; the button stays beside them while it fits */
.qa .youthin > span { flex: 1 1 18em; min-width: 0; }
.qa .youthin > .qa-thinbtn { flex: none; }
.qa .youlegend .youkey { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
/* The table fits its panel at every width, with no sideways scroll: the
   columns share the width (fixed layout, up to the max-width quicklook.js
   gives it), and a narrow panel gets compact cells (the heat container). */
.qa .youheatp { container: heat / inline-size; }
.qa .youheatwrap { max-width: 100%; min-width: 0; }
.qa .youheat { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 3px; font-variant-numeric: tabular-nums; }
.qa .youheat .youcolopp { width: 104px; }
.qa .youheat th { font-weight: 600; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qa .youheat .youstage { padding: 0 2px 2px; text-align: center; }
.qa .youheat .youopp { text-align: left; padding-right: 6px; }
.qa .youheat .youoppin { display: flex; align-items: center; gap: 5px; min-width: 0; }
.qa .youheat .youoppin > span { overflow: hidden; text-overflow: ellipsis; }
.qa .youheat .youopp img { width: 20px; height: 20px; flex: none; }
.qa .youheat td { height: 48px; border-radius: 7px; text-align: center; padding: 0; overflow: hidden; }
.qa .youheat td.none { color: var(--muted); border: 1px dashed var(--line); }
/* a cell with the band's number under the player's ("P 54%") */
.qa .youheat tr:has(td.ref) td { height: 62px; }
.qa .youcellbtn > * { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qa .youcell { border: 1px solid var(--line); }
.qa .youcell.thin { opacity: .45; }
.qa .youcellbtn {
  box-sizing: border-box; width: 100%; height: 100%; padding: 4px 6px; line-height: 1.2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text);
}
.qa .youcellbtn b { font-size: 15px; }
.qa .youcellbtn small { font-size: 11px; color: var(--muted); }
.qa .youcellbtn small.youref { white-space: nowrap; color: var(--text); opacity: .8; }
.qa [data-tip].youcellbtn:hover { text-decoration: none; }
/* compact cells on a narrow panel (after the rules above, which they change) */
@container heat (max-width: 560px) {
  .qa .youheat { border-spacing: 2px; }
  .qa .youheat .youcolopp { width: 54px; }
  .qa .youheat th { font-size: 12px; }
  .qa .youheat .youoppin { flex-direction: column; align-items: flex-start; gap: 2px; font-size: 11px; }
  .qa .youheat td { height: 44px; border-radius: 6px; }
  .qa .youheat tr:has(td.ref) td { height: 56px; }
  .qa .youcellbtn { padding: 3px 1px; }
  .qa .youcellbtn b { font-size: 12px; }
  .qa .youcellbtn small { font-size: 10px; }
}
/* the narrowest phones: a little more room for the cells */
@container heat (max-width: 300px) {
  .qa .youheat { border-spacing: 1px; }
  .qa .youheat .youcolopp { width: 40px; }
  .qa .youheat .youoppin { font-size: 10px; }
  .qa .youcellbtn { padding: 2px 0; }
  .qa .youcellbtn b { font-size: 11px; }
  .qa .youcellbtn small { font-size: 9.5px; }
}
@media (max-width: 420px) {
  .qa .youheatp { padding: 14px 10px; }
}

/* the technique table (stats.css .statstable) */
.qa .statssection > h2 { margin: 0 4px 10px; font-size: 15px; color: var(--text); }
.qa .statstable { padding: 4px 2px; overflow-x: auto; }
.qa .statstable table { width: 100%; border-collapse: collapse; }
.qa .statstable th, .qa .statstable td { padding: 6px 10px; text-align: left; }
.qa .statstable thead th { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
/* a player's name stays as it is written (aMSa, not AMSA) */
.qa .statstable thead th.name { text-transform: none; letter-spacing: 0; font-size: 12px; }
.qa .statstable tbody th { font-weight: 400; }
.qa .statstable tbody tr + tr { border-top: 1px solid var(--panel-2); }
.qa .statsnum { text-align: right !important; font-variant-numeric: tabular-nums; }
.qa .statstable td.statsnum { font-weight: 700; }
.qa .statstable tr.thin th, .qa .statstable tr.thin td { color: var(--muted); font-weight: 400; }

@media (max-width: 700px) {
  .qa .statsbar { grid-template-columns: 7em 1fr 4.2em; }
  .qa .statsbar .val { white-space: nowrap; }
  .qa .statsbar .small { display: none; }
  .qa .statstable th, .qa .statstable td { padding: 5px 6px; }
  .qa .soicon { width: 64px; height: 64px; }
  .qa .soicon img { width: 46px; height: 46px; }
}
@media (max-width: 600px) {
  .qa-tools { padding: 12px 12px; }
  .qa-body { padding: 12px 10px 20px; }
  .qa .youcellbtn small { white-space: nowrap; }
}