:root {
    --bg:        #0e0f12;
    --bg-2:      #16181d;
    --panel:     #1b1e24;
    --panel-2:   #21252c;
    --line:      #2b3038;
    --text:      #e7e9ee;
    --muted:     #8b93a2;
    --accent:    #d43a2f;   /* L4D2 blood red */
    --accent-2:  #ff6b52;
    --gold:      #ffcf4d;
    --silver:    #c9d1dc;
    --bronze:    #d98a4b;
    --hl:        rgba(212, 58, 47, 0.14);

    /* categorical palette (identity color, fixed order — never reassigned by rank),
       dark-surface validated: OKLab CVD ΔE >= 8.4, normal-vision ΔE >= 19.3 adjacent,
       contrast >= 3:1 on --panel (#1b1e24) */
    --cat-1: #3987e5; /* blue */
    --cat-2: #d95926; /* orange */
    --cat-3: #199e70; /* aqua */
    --cat-4: #c98500; /* yellow */
    --cat-5: #d55181; /* magenta */
    --cat-6: #008300; /* green */
    --cat-7: #9085e9; /* violet */
    --cat-8: #e66767; /* red */

    /* two hues only (blue = SMG/pistol lineage, pink = shotgun/melee lineage).
       Shade = position within a bar: dark at the outer edge, light toward the
       center where the two hues meet — reused as-is for セカンダリ内訳 and for
       the two 2-segment aggregate bars (no per-weapon dedicated colors).
       Each step re-checked for >=3:1 contrast on --panel (#1b1e24). */
    --blue-dark:  #256abf; /* contrast 3.1:1 */
    --blue-mid:   #3987e5; /* contrast 4.9:1 — also the flat "lead" blue */
    --blue-light: #86b6ef; /* contrast 7.9:1 */
    --pink-light: #e48ead; /* contrast 7.0:1 */
    --pink-dark:  #d55181; /* contrast 4.2:1 — also the flat "lead" pink */
    --yellow-pale: #e8d27a; /* contrast 9.6:1 — Scout, the third primary family */
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: radial-gradient(1200px 600px at 50% -200px, #1a1c22 0%, var(--bg) 60%);
    color: var(--text);
    font: 15px/1.5 "Segoe UI", system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
    min-height: 100vh;
}

a { color: inherit; text-decoration: none; }

.wrap {
    max-width: 1040px;
    margin: 0 auto;
    padding: 24px 20px 60px;
}

/* Header ------------------------------------------------------------------- */
.site-header {
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, #14151a, #0e0f12);
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
}
.brand-text { font-size: 18px; font-weight: 700; }
.site-nav { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.site-nav a {
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--muted);
    font-size: 13.5px;
    transition: .12s;
}
.site-nav a:hover { color: var(--text); border-color: #3a4150; }
.site-nav a.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    box-shadow: 0 0 14px rgba(212,58,47,0.45);
}

/* Stat strip --------------------------------------------------------------- */
.stat-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 22px;
}
.stat-strip-2 { grid-template-columns: repeat(2, 1fr); }
.chip {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.chip-num { font-size: 22px; font-weight: 700; }
.chip-lbl { color: var(--muted); font-size: 12px; }

/* Tabs --------------------------------------------------------------------- */
.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}
.tab {
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--muted);
    font-size: 13.5px;
    transition: .12s;
}
.tab:hover { color: var(--text); border-color: #3a4150; }
.tab.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    box-shadow: 0 0 14px rgba(212,58,47,0.45);
}

/* Ranking table ------------------------------------------------------------ */
.table-scroll { overflow-x: auto; border-radius: 12px; border: 1px solid var(--line); }
table.rank {
    width: 100%;
    border-collapse: collapse;
    background: var(--panel);
    min-width: 720px;
}
table.rank th, table.rank td {
    padding: 11px 12px;
    text-align: right;
    white-space: nowrap;
}
table.rank thead th {
    background: var(--bg-2);
    color: var(--muted);
    font-weight: 600;
    font-size: 12.5px;
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
}
table.rank tbody tr { border-bottom: 1px solid #23272e; }
table.rank tbody tr:last-child { border-bottom: 0; }
table.rank tbody tr:hover { background: var(--panel-2); }
.col-rank { text-align: center !important; width: 54px; }
.col-name { text-align: left !important; }
.col-name a { color: var(--text); font-weight: 600; }
.col-name a:hover { color: var(--accent-2); }
th.hl, td.hl { background: var(--hl); color: #fff; font-weight: 700; }
th.sortable a { color: inherit; cursor: pointer; }
th.sortable a:hover { color: var(--accent-2); text-decoration: underline; }

.rankbadge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px; height: 26px;
    border-radius: 50%;
    font-size: 12.5px;
    font-weight: 700;
    background: #262b33;
    color: var(--muted);
}
.rankbadge.r1 { background: var(--gold);   color: #241c00; }
.rankbadge.r2 { background: var(--silver); color: #1a1d22; }
.rankbadge.r3 { background: var(--bronze); color: #241300; }

/* Player page -------------------------------------------------------------- */
.back { color: var(--muted); font-size: 13.5px; }
.back:hover { color: var(--text); }

.player-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 14px 0 22px;
    padding: 22px;
    background: linear-gradient(120deg, var(--panel), var(--bg-2));
    border: 1px solid var(--line);
    border-left: 4px solid var(--accent);
    border-radius: 12px;
}
.avatar {
    flex: 0 0 auto;
    width: 64px; height: 64px;
    border-radius: 10px;
    background: linear-gradient(160deg, #2a2f38, #1a1d22);
    border: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
a.avatar:hover { border-color: var(--accent-2); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
/* placeholder silhouette until a real Steam avatar URL is wired in */
.avatar-ph {
    width: 34px; height: 34px;
    background: var(--muted);
    opacity: .5;
    -webkit-mask: radial-gradient(circle at 50% 34%, #000 12px, transparent 13px), radial-gradient(ellipse 60% 40% at 50% 100%, #000 60%, transparent 62%);
    mask: radial-gradient(circle at 50% 34%, #000 12px, transparent 13px), radial-gradient(ellipse 60% 40% at 50% 100%, #000 60%, transparent 62%);
}
.player-hero { gap: 18px; }
.player-id { margin-right: auto; }
.player-id h1 { margin: 0 0 4px; font-size: 26px; }
.profile-link { color: var(--text); }
.profile-link:hover { color: var(--accent-2); text-decoration: underline; }
.muted { color: var(--muted); font-size: 13px; }

/* Three grouped cards (score / play / MVP) instead of four single-stat ones:
   related numbers read as one block, and each number gets less weight than the
   old full-size .card-num so the row stops competing with the panels below. */
/* Score and play are two-line readouts; MVP carries three tiles, so it takes the
   wider column and the other two shrink to just what their numbers need. */
.cards {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 0.82fr) minmax(0, 1.36fr);
    gap: 12px;
    margin-bottom: 22px;
}
.card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 13px 14px;
}
.card.accent { border-color: rgba(212,58,47,0.5); background: linear-gradient(180deg, #221a1a, var(--panel)); }
.card-num { font-size: 24px; font-weight: 700; }
.card-lbl { color: var(--muted); font-size: 12px; margin-top: 3px; }
/* same accent + tracking as the panel headings below (.skills-head h2) */
.card-grp-lbl { color: var(--accent-2); font-size: 12px; font-weight: 700; letter-spacing: .5px; }
/* Stacked rows, name left and number right, hairline-separated. Cards in a
   grid row are equal height, so the rows spread to fill it -- a 2-stat card
   and a 3-stat one stay the same shape instead of leaving dead space. */
.card { display: flex; flex-direction: column; }
/* grid over flex on purpose: grid-auto-rows:1fr splits the card height into
   equal bands, so a 2-row card gets two tall bands instead of two short rows
   with a hole between them. Every card in the row keeps the same rhythm. */
.card-grp { display: grid; grid-auto-rows: 1fr; flex: 1 1 auto; margin-top: 9px; }
.card-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card-item > .card-item-num:only-child { margin-left: auto; }
.card-item + .card-item { border-top: 1px solid var(--line); }
/* score card only: its two rows are one figure at two scales, not two separate
   stats, so a rule between them would split what should read as one block */
.card-score .card-item + .card-item { border-top: 0; }
.card-item-lbl { color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .04em; white-space: nowrap; }
.card-item-num { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.15; }
/* score card: no row labels, so the two numbers carry the hierarchy themselves
   -- total large, per-second smaller with a dimmer unit hung off it. */
.card-item-num-lg { font-size: 25px; font-weight: 800; }
.card-item-num-sm { font-size: 15px; }
.card-item-unit { color: var(--muted); font-size: 11px; font-weight: 600; margin-left: 1px; }

/* MVP: three tiles in a row (one per category) instead of stacked rows, so a
   category with wins reads as a lit-up box rather than one number among many.
   0 stays unlit -- an empty category should look empty. */
.mvp-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 9px; flex: 1 1 auto; }
.mvp-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 7px 4px;
}
.mvp-tile.on { border-color: rgba(212,58,47,0.5); background: linear-gradient(180deg, #241a1a, var(--bg-2)); }
.mvp-tile-num { font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.mvp-tile.on .mvp-tile-num { color: var(--accent-2); }
.mvp-tile-lbl { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .08em; }

.skills-panel {
    background: var(--panel);
    border: 1px solid var(--line);
    /* same accent edge the player hero carries, so the panels below read as
       part of the same stack rather than as unrelated boxes */
    border-left: 4px solid var(--accent);
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 22px;
}
.skills-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 12px;
}
.skills-head h2 { margin: 0; font-size: 14px; color: var(--accent-2); letter-spacing: .5px; }
.skill-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr); /* 8 skills in one row */
    gap: 8px;
}
.kill-grid { grid-template-columns: repeat(9, 1fr); }
.kill-grid .skill-cell { cursor: default; }
/* SI type icon as the cell background; dark overlay keeps the count readable.
   Icons are square (192x192), so a square cell fills edge-to-edge with no gaps. */
.kill-grid .skill-cell.has-icon {
    aspect-ratio: 1 / 1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px;
}
.kill-grid .skill-cell.has-icon::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(14, 15, 18, 0.5);
    z-index: 0;
}
.kill-grid .skill-cell.has-icon > span { position: relative; z-index: 1; }
.kill-grid .skill-cell.has-icon .skill-num { text-shadow: 0 1px 4px rgba(0,0,0,0.95); }
.kill-grid .skill-cell.has-icon .skill-lbl { color: #e7ebf2; text-shadow: 0 1px 3px rgba(0,0,0,0.95); }
.kill-grid .skill-lbl .unit { display: block; font-size: 9px; opacity: .8; letter-spacing: 0; }

/* 武器 tiles: two stacked bands instead of a square icon-background cell —
   weapon icons are wide, short silhouettes (91-195px wide, 32-64px tall), the
   opposite shape of the SI portraits above, so they get their own strip
   (top) sized to their real aspect via `contain`, with the stat text in a
   plain band below instead of overlaid on top of the image. */
.weapon-tile-grid { grid-template-columns: repeat(4, 1fr); }
/* 14px below the tiles before the bars start, same rhythm as the other
   tiles-then-detail-box gaps on this page (.share-bars + .vs-col-merged). */
.weapon-tile-grid + .share-bars { margin-top: 14px; }
.weapon-tile-grid .skill-cell {
    cursor: default;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    border-color: #fff;
}
.weapon-tile-icon {
    /* Confirmed via ImageMagick (flatten onto magenta): the gun silhouette
       itself is WHITE on a transparent field, not dark — a white tile
       background made it invisible. Dark background is correct here.
       `contain` (not a fixed %) guarantees the icon never clips regardless
       of column width — a wide icon like the SMGs was overflowing the band
       at a width-driven "80% auto" size. */
    height: 92px;
    background-color: var(--bg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    padding: 8px;
}
/* text band split left/right: label+weapon name stacked on the left,
   the percentage large on the right — two equal halves, each centered
   within itself (not edge-anchored). */
.weapon-tile-body {
    padding: 10px 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
}
.weapon-tile-info {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 3px;
    min-width: 0;
}
.weapon-tile-info .avg-tag { font-size: 10.5px; }
.weapon-tile-info .skill-lbl {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.weapon-tile-grid .skill-num { font-size: 26px; flex: 1 1 50%; text-align: center; white-space: nowrap; }
/* "Avg" tag above the boss average-damage number; keeps the tile the same size */
.avg-tag {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 1;
    color: var(--accent-2);
}
.kill-grid .skill-cell.has-icon .avg-tag { color: #ffd2c6; text-shadow: 0 1px 3px rgba(0,0,0,0.95); }
.avg-tag.invisible { visibility: hidden; } /* keeps the row height so numbers stay aligned */
/* boss avg numbers are 4 digits — trim size a touch so they fit the square tile */
.kill-grid .skill-cell .skill-num { font-size: 18px; }
.skill-cell {
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px 8px;
    text-align: center;
    opacity: .55;
    cursor: help;
}
.skill-cell.on { opacity: 1; }
/* frame colours: green = positive play, red = negative (bile'd teammates) */
.skill-cell.tone-good { border-color: rgb(0, 255, 0); }
.skill-cell.tone-bad  { border-color: rgb(255, 0, 0); }
.skill-num { display: block; font-size: 22px; font-weight: 700; }
.skill-lbl { color: var(--muted); font-size: 11px; }

/* vs感染者 merged panel (tiles + 3-column body) ---------------------------- */
.vs-panel {
    background: var(--panel);
    border: 1px solid var(--line);
    /* same accent edge the player hero carries, so the panels below read as
       part of the same stack rather than as unrelated boxes */
    border-left: 4px solid var(--accent);
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 22px;
}
.vs-body {
    display: grid;
    grid-template-columns: 1fr 1fr;   /* both boxes now 2-axis: score (総合/R平均 slash) + damage (総合/単体/R平均) */
    gap: 12px;
    margin-top: 14px;
}
.vs-col {
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px 14px;
}
.vs-col-head {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--accent-2);
    letter-spacing: .3px;
    margin-bottom: 6px;
    white-space: nowrap;
}
/* not-yet-built columns: dashed + dimmed so the 3-column plan is visible */
.vs-col.is-wip { opacity: .6; border-style: dashed; }
.wip-note { color: var(--muted); font-size: 13px; margin: 10px 0 4px; }
.wip-note small { font-size: 11px; }

/* weapon share bars (100%-stacked, damage share) --------------------------- */
.share-bars { display: flex; flex-direction: column; gap: 12px; margin-bottom: 4px; }
/* same top margin as .vs-body uses to separate the vs感染者 tiles from its
   detail box below — same rhythm: bars/tiles, then a gap, then the detail box */
.share-bars + .vs-col-merged { margin-top: 14px; }
.share-bar-title { font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 8px; }
.share-bar-track {
    display: flex;
    height: 22px;
    background: var(--bg-2);
    border-radius: 4px;
    overflow: hidden;
}
/* No seam between segments — a border/gap could never render at a uniform
   width across every segment boundary, so segments sit flush instead. */
.share-seg { height: 100%; min-width: 2px; }
.share-bar-empty { padding: 10px 0; text-align: left; font-size: 13px; }
/* Two legend groups, each half the row, so every name sits under its own half of
   the bar: SMGs flush left; Scout and the shotguns flush right, in that order so
   the Scout name stays left of them just as its segment does. */
.share-legend { display: flex; flex-wrap: wrap; margin-top: 8px; gap: 0 16px; }
.share-legend-group { display: flex; flex-wrap: wrap; gap: 6px 16px; flex: 1 1 0; min-width: 0; }
.share-legend-group-left { justify-content: flex-start; }
.share-legend-group-right { justify-content: flex-end; }
.share-legend-item { display: flex; align-items: center; gap: 6px; font-size: 12.5px; }
.share-swatch { width: 9px; height: 9px; border-radius: 2px; flex: 0 0 auto; }
.share-legend-lbl { color: var(--text); font-weight: 600; }
.share-legend-pct { color: var(--muted); font-variant-numeric: tabular-nums; }

/* Survivor-state list under the skill tiles: two columns of label-then-number
   rows, same shape as the cards up top. No on/off state and no good/bad tone --
   these are costs and mishaps, not achievements, so they read quieter than the
   tiles above them. */
.surv-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* column-major: the first seven rows fill the left column, the rest the
       right, so each column reads top-to-bottom as its own list */
    grid-template-rows: repeat(7, auto);
    grid-auto-flow: column;
    gap: 0 26px;
    margin-top: 12px;
    padding-top: 4px;
    border-top: 1px solid var(--line);
}
.surv-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 2px;
    border-bottom: 1px solid #23272e;
    cursor: default;
}
/* no rule under the bottom entry of either column */
.surv-item:nth-child(7), .surv-item:last-child { border-bottom: 0; }
.surv-lbl { color: var(--muted); font-size: 12.5px; }
.surv-num { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* kill breakdown tree */
table.tree { width: 100%; border-collapse: collapse; }
table.tree th, table.tree td { padding: 6px 0; border-bottom: 1px solid #23272e; }
table.tree tr:last-child th, table.tree tr:last-child td { border-bottom: 0; }
table.tree th { text-align: left; font-weight: 500; color: var(--text); }
table.tree td { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
table.tree th small { color: var(--muted); font-size: 10px; margin-left: 5px; }
/* hierarchy: lvl0 = total, lvl1 = CI/SI/Witch/Tank, lvl2 = per-SI breakdown */
tr.lvl0 th { font-weight: 800; font-size: 14px; }
tr.lvl0 td { font-size: 16px; font-weight: 800; }  /* total: emphasized by weight/size, not color (orange is for headings only) */
tr.lvl1 th { padding-left: 14px; }
tr.lvl1.grp th { font-weight: 700; }
tr.lvl2 th { padding-left: 30px; font-size: 12.5px; color: var(--muted); }
tr.lvl2 td { color: var(--muted); font-weight: 500; }
/* no divider lines between the individual SI-class rows */
tr.lvl2 th, tr.lvl2 td { border-bottom: 0; padding-top: 4px; padding-bottom: 4px; }
/* per-row divider overrides (win via source order): no-line strips a border,
   line adds one — used to hide the SI header's divider and cap the SI block after Charger */
tr.no-line th, tr.no-line td { border-bottom: 0; }
tr.line th, tr.line td { border-bottom: 1px solid #23272e; }
/* total moved to the bottom: a stronger top rule marks it as a footer sum */
tr.total-row th, tr.total-row td { border-top: 2px solid var(--line); border-bottom: 0; padding-top: 9px; }

/* compact K/A/S box: three slash-separated numbers on one line, fonts inherited
   from table.tree so it matches the damage box. */
table.tree.ska td { white-space: nowrap; }
.ska .sl { color: var(--muted); margin: 0 4px; font-weight: 400; }

/* damage box (総合 / 単体平均 / ラウンド平均): shared label column that flexes, plus
   right-aligned value columns that auto-size to content. */
table.tree.merged td { padding-left: 16px; text-align: right; white-space: nowrap; }
/* column headers live inside the table so they line up with the value columns */
table.tree.merged tr.col-heads th,
table.tree.merged tr.col-heads td {
    color: var(--accent-2);
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: .3px;
    padding: 0 0 8px;
    border-bottom: 0;
    white-space: nowrap;
}
table.tree.merged tr.col-heads td { padding-left: 16px; }
table.tree.merged tr.col-heads td small { color: var(--muted); font-size: 10px; }

/* Ranking ----------------------------------------------------------------- */
/* One board: スコア and 秒間スコア pinned, third column chosen here. The
   picker sits above the table on its own row, right-aligned. */
.rank-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.rank-pick-lbl { color: var(--muted); font-size: 12.5px; font-weight: 600; margin-left: auto; }
.rank-pick {
    max-width: 320px;
    background: var(--bg-2);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: 6px 9px;
    font: inherit;
    font-size: 12.5px;
}
.rank-pick:hover { border-color: #3a4150; }
.rank-pick:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 1px; }
.rank-apply { font: inherit; font-size: 12.5px; }

/* TOP page ----------------------------------------------------------------- */
/* 41752_mark.png is the source 41752.png with its white background made
   transparent, trimmed to the figure and negated to white (ImageMagick). The
   original inverts to a solid black rectangle that reads as a box on the page
   background, which is why the mark gets its own file rather than a filter. */
.top-art { display: flex; justify-content: center; padding: 56px 0 72px; }
.top-art img { width: auto; height: 46vh; min-height: 240px; max-height: 420px; max-width: 100%; }

/* Misc --------------------------------------------------------------------- */
.empty { color: var(--muted); padding: 40px 0; text-align: center; }
@media (max-width: 720px) {
    .stat-strip { grid-template-columns: repeat(2, 1fr); }
    /* grouped cards hold 2-3 stats each; half-width would squeeze them, and
       three of them never split evenly across two columns anyway */
    .cards { grid-template-columns: 1fr; }
    .vs-body { grid-template-columns: 1fr; }
    .skill-grid { grid-template-columns: repeat(3, 1fr); }
    .kill-grid { grid-template-columns: repeat(4, 1fr); }
    .weapon-tile-grid { grid-template-columns: repeat(2, 1fr); }
    .surv-list { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
    .brand-sub { width: 100%; margin-left: 0; }
}