/*
 * Basta Master: the style of the pages of the master web (rules, how to play, live game, smart game, print, catalog, hall of
 * fame, profile ...), prototyped in Storybook (AppPages/*) and moved 1:1 to the JSF pages of the master web (BST-413).
 * The names follow the React components of the game (BoxContent, Message, Btn, Chip, Breadcrumbs ...) so that the same look
 * can later be used by the game: a block that means the same thing has the same name.
 *
 * Plain CSS with the `bm-` prefix (basta-master) on purpose: the same file is served by the master web, the markup is plain HTML.
 *
 * Rules of this file:
 *  - every colour is a variable: the theme tokens (theme.css) or the `--bm-*` tokens below, no colour literal outside them
 *    (light / dark follow html.dark / html[theme="dark"] by themselves);
 *  - every length is rem (1rem = 16px, like the game), only the hairlines use var(--spacing-1);
 *  - one look = one rule: BOX CONTENT (big window), ITEM (small card), LABEL (small caps heading), BADGE (round filled);
 *    new blocks reuse them instead of repeating border / radius / background.
 */
.bm {
    --bm-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    --bm-ink: var(--color-text);
    --bm-muted: var(--color-text-muted);
    --bm-line: var(--color-border-subtle);
    --bm-link: var(--color-link);
    --bm-accent: var(--color-link);
    --bm-fill: var(--primary-color);
    --bm-on-fill: var(--btn-primary-text-color);
    --bm-surface: var(--color-surface);
    --bm-panel: var(--color-surface-raised);
    --bm-card: color-mix(in srgb, var(--primary-color) 7%, var(--color-surface));
    --bm-frame: color-mix(in srgb, var(--bm-ink) 18%, var(--bm-surface));
    --bm-warn-bg: rgba(255, 179, 0, 0.18);
    --bm-warn-edge: #ffb300;
    --bm-positive: var(--color-success);
    --bm-vp: var(--victory-points-color);
    --bm-radius: 1.125rem;
    --bm-radius-sm: 0.875rem;
    --bm-radius-lg: 1.5rem;
    --bm-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.18);
    --bm-shadow-panel: 0 0.5rem 1.625rem rgba(15, 40, 80, 0.12);

    /* the palette of the icons (a colour per card): one place to change it */
    --bm-hue-blue: #3b82f6;
    --bm-hue-green: #22a06b;
    --bm-hue-amber: #f59e0b;
    --bm-hue-pink: #ec4899;
    --bm-hue-violet: #8b5cf6;
    --bm-hue-teal: #0ea5a4;
    --bm-hue-orange: #ef6c00;
    --bm-hue-indigo: #6366f1;
    --bm-hue-cyan: #0891b2;
    --bm-hue-gold: #d9a400;
    --bm-hue-aqua: #14b8a6;
    --bm-hue-red: #e11d48;
    --bm-hue-sky: #0ea5e9;
    --bm-hue-slate: #64748b;

    color: var(--bm-ink);
    line-height: 1.6;
    padding-bottom: 1.5rem;
}
.bm *, .bm *::before, .bm *::after { box-sizing: border-box; }
.bm h1, .bm h2, .bm h3, .bm h4 { color: var(--bm-ink); line-height: 1.2; font-weight: 800; letter-spacing: -0.01em; }
.bm a { color: var(--bm-link); }
.bm p { margin: 0 0 0.75rem; }
.bm ul { margin: 0; }

/* ---------- the four shared looks ---------- */

/* BOX CONTENT (like the React BoxContent): a big window on the squared paper; the modifiers say what it is */
.bm-box-content {
    border: var(--spacing-1) solid var(--bm-line);
    border-radius: var(--bm-radius-lg);
    background: var(--bm-panel);
    box-shadow: var(--bm-shadow-panel);
}

/* ITEM: a small card inside a panel */
.bm-card, .bm-steps li, .bm-faq details, .bm-hub__card, .bm-filterbox, .bm-statbox, .bm-flaglink, .bm-table, .bm-chips li, .bm-chips a {
    border: var(--spacing-1) solid var(--bm-line);
    border-radius: var(--bm-radius-sm);
    background: var(--bm-card);
}
.bm-card, .bm-hub__card, .bm-statbox { border-radius: var(--bm-radius); }

/* LABEL: a small-caps heading */
.bm-filterbox h3 { margin: 1.125rem 0 0.5rem; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--bm-muted); }
.bm-filterbox h3 { margin-top: 0; }

/* BADGE: a round filled shape (step numbers, icons) */
.bm-flow h3::before, .bm-steps li::before, .bm-icon {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    color: var(--bm-on-fill); font-weight: 800;
    background: var(--bm-icon-bg, var(--bm-fill));
}

/* ---------- top block ---------- */
.bm-box-content--hero { position: relative; margin-bottom: 1.625rem; padding: 1.875rem 2.125rem 1.625rem; backdrop-filter: blur(2px); }
.bm hgroup { margin: 0; }
.bm .bm-eyebrow { display: block; margin: 0 0 0.625rem; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bm-accent); }
.bm-box-content--hero h1 { margin: 0 0 0.875rem; font-size: clamp(2.125rem, 6vw, 3.75rem); }
.bm-lead { max-width: 46em; margin-bottom: 1.375rem; font-size: 1.1875rem; color: var(--bm-muted); }
.bm .bm-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.125rem; }
.bm .bm-actions--sm { gap: 0.5rem; margin-bottom: 0; }
.bm-actions--sm .bm-btn { padding: 0.5rem 1.125rem; font-size: 0.9375rem; }
.bm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.8125rem 1.625rem; border: 2px solid transparent; border-radius: 999px; font-size: 1.0625rem; font-weight: 700; line-height: 1.2; text-decoration: none !important; cursor: pointer; transition: background-color 0.12s ease, border-color 0.12s ease; }
.bm-btn--primary { color: var(--bm-on-fill) !important; border-color: var(--bm-fill); background: var(--bm-fill); }
.bm-btn--primary:hover { border-color: var(--blue-700); background: var(--blue-600); }
.bm-btn--default { color: var(--gray-800) !important; border-color: var(--gray-400); background: var(--body-bg-color); }
.bm-btn--default:hover { border-color: var(--gray-500); background: var(--gray-300); }
.bm-trust { display: flex; flex-wrap: wrap; gap: 0.375rem 1.125rem; margin: 0; padding: 0; list-style: none; font-size: 0.9375rem; }
.bm-trust li::before { content: ""; display: inline-block; width: 1em; height: 1em; margin-right: 0.375rem; vertical-align: -0.15em; background-color: var(--bm-accent);
    -webkit-mask: var(--bm-check) center / contain no-repeat; mask: var(--bm-check) center / contain no-repeat; }
.bm-icon-inline .bm-svg { display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -0.2em; }
.bm-box-content--toc { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.875rem; margin: -0.5rem 0 1.375rem; padding: 0.875rem 1.25rem; }
.bm-box-content--toc ul { flex: 1 1 auto; }

/* ---------- content ---------- */
.bm-box-content--group { margin-bottom: 1.625rem; padding: 0.375rem 2.125rem; }
.bm-box-content--group > :first-child { border-top: 0; }
.bm-section, .bm-answer { margin: 0; padding: 1.75rem 0; border-top: var(--spacing-1) solid var(--bm-line); }
.bm-section > h2 { margin: 0 0 0.625rem; font-size: clamp(1.5rem, 3.4vw, 2rem); }
.bm-answer h2 { margin: 0 0 0.5rem; font-size: 1.375rem; }
.bm-answer p:last-child { margin-bottom: 0; }
.bm-sub { max-width: 46em; margin-bottom: 1.375rem; font-size: 1.0625rem; color: var(--bm-muted); }
.bm-sub-inline { font-size: 0.6em; font-weight: 500; color: var(--bm-muted); }
.bm .bm-note { margin: 1.125rem 0 0; padding: 0 0.25rem; font-size: 0.8125rem; line-height: 1.5; color: var(--bm-muted); }
.bm-subhead { margin-top: 1.375rem; }
.bm-legal { max-width: 52em; }
.bm-legal h2 { margin-top: 0; }
.bm-legal h3 { margin: 1.375rem 0 0.5rem; font-size: 1.25rem; }
.bm-legal h4 { margin: 1rem 0 0.375rem; font-size: 1.0625rem; }
.bm-message--warning { margin-top: 1rem; padding: 0.75rem 1rem; border-left: 0.25rem solid var(--bm-warn-edge); border-radius: 0 0.75rem 0.75rem 0; background: var(--bm-warn-bg); font-size: 0.9375rem; }
.bm-message--warning a { color: inherit; text-decoration: underline; }

/* cards */
.bm-grid, .bm-hub__grid, .bm-statboxes, .bm-flaggrid { margin: 0; padding: 0; list-style: none; }
.bm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14.375rem, 1fr)); gap: 1rem; }
.bm-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bm-card { padding: 1.25rem 1.375rem; }
.bm-card h3 { margin: 0 0 0.375rem; font-size: 1.125rem; }
.bm-card p:last-child { margin-bottom: 0; }
.bm-card .bm-big { display: block; margin-bottom: 0.25rem; font-size: 2.125rem; font-weight: 800; line-height: 1.1; color: var(--bm-accent); }
.bm-grid .bm-btn { margin-top: 0.625rem; padding: 0.5rem 1.125rem; font-size: 0.875rem; }
.bm-icon { width: 2.875rem; height: 2.875rem; margin-bottom: 0.625rem; border-radius: 0.8125rem; font-size: 1.375rem; }
.bm-icon--flag { background: var(--bm-card); border: var(--spacing-1) solid var(--bm-line); }
.bm-svg { display: block; width: 1.5rem; height: 1.5rem; }
.bm-big .bm-svg { width: 2.125rem; height: 2.125rem; }

/* steps */
.bm-steps { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; counter-reset: bm-step; }
.bm-steps li { position: relative; padding: 0.875rem 1.125rem 0.875rem 4.125rem; counter-increment: bm-step; }
.bm-steps li::before { content: counter(bm-step); position: absolute; left: 1rem; top: 0.75rem; width: 2.25rem; height: 2.25rem; border-radius: 50%; }
.bm-steps strong { display: block; }

/* text next to a screenshot */
.bm-split { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 2.25rem; align-items: center; padding: 1.625rem 0; border-top: var(--spacing-1) solid var(--bm-line); }
.bm-split:first-of-type { border-top: 0; }
.bm-split--rev { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
.bm-split--rev .bm-shots, .bm-split--rev .bm-gallery { order: -1; }
.bm-gallery { display: grid; gap: 1rem; justify-items: center; min-width: 0; }
.bm-split h3 { margin: 0 0 0.625rem; font-size: 1.5rem; }
.bm-flow { margin: 0; padding: 0; list-style: none; counter-reset: bm-step; }
.bm-flow > li { counter-increment: bm-step; }
.bm-flow h3::before { content: counter(bm-step); display: inline-flex; width: 2.125rem; height: 2.125rem; margin-right: 0.625rem; border-radius: 50%; font-size: 1.125rem; vertical-align: middle; }
/* a screenshot of the game: a visible frame (darker than the page in the light mode, lighter in the dark one) and a short caption */
/* a screenshot of the game: a visible frame (darker than the page in the light mode, lighter in the dark one) with a short caption under the image */
.bm-shots { display: grid; justify-self: center; width: fit-content; max-width: 100%; margin: 0; overflow: hidden; border: var(--spacing-1) solid var(--bm-frame); border-radius: 0.75rem; }
.bm-shots figcaption { padding: 0.375rem 0.75rem; border-top: var(--spacing-1) solid var(--bm-frame); font-size: 0.8125rem; text-align: center; color: var(--bm-muted); }
.bm-shots--wide { margin: 0 auto 1.25rem; }
.bm-shots--wide .bm-shot { max-height: 38.75rem; }
.bm-shot { display: block; max-width: 100%; max-height: 33.75rem; width: auto; height: auto; margin: 0 auto; background: var(--bm-surface); }
.bm-shot--dark { display: none; }
html.dark .bm-shot--dark, html[theme="dark"] .bm-shot--dark { display: block; }
html.dark .bm-shot--light, html[theme="dark"] .bm-shot--light { display: none; }
.bm-split .bm-shot[src*="flag-"] { width: 100%; max-height: none; }
.bm-placeholder .bm-sub { margin: 0; }
.bm-placeholder { display: flex; align-items: center; justify-content: center; min-height: 16.25rem; text-align: center; }

/* table */
.bm-table { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; }
.bm-table th, .bm-table td { padding: 0.625rem 0.875rem; text-align: left; border-bottom: var(--spacing-1) solid var(--bm-line); }
.bm-table tr:last-child td { border-bottom: 0; }
.bm-table th { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--bm-muted); }
.bm-table tbody th { width: 28%; text-transform: none; letter-spacing: 0; font-size: 0.875rem; }

/* chips: categories, names of the game in the world, the contents */
.bm-chips { display: flex; flex-wrap: wrap; gap: 0.625rem; margin: 0; padding: 0; list-style: none; }
.bm-chips li, .bm-chips a { display: inline-flex; flex-direction: column; padding: 0.5rem 0.9375rem; font-weight: 700; text-decoration: none; }
.bm-chips a small { font-weight: 400; font-size: 0.75rem; color: var(--bm-muted); }
.bm-chips a:hover { border-color: var(--bm-accent); }
.bm-chips--plain li { flex-direction: row; font-weight: 500; }
.bm-chips li:has(> a) { padding: 0; border: 0; background: none; }
.bm-chip-name { display: inline-flex; align-items: center; }
.bm-box-content--toc .bm-chips a { display: inline-flex; padding: 0.25rem 0.75rem; font-weight: 500; }

/* the big button above the questions: the same action as in the top block */
.bm-cta { display: flex; justify-content: center; margin: 0 0 1.5rem; }
.bm-cta .bm-btn { padding: 1.125rem 3.5rem; font-size: 1.375rem; }

/* ranking of the categories: numbered links in columns */
.bm-rank { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.625rem 1rem; margin: 0; padding: 0; list-style: none; counter-reset: bm-rank; }
.bm-rank li { counter-increment: bm-rank; }
.bm-rank a { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.875rem 0.5rem 0.5rem; border: var(--spacing-1) solid var(--bm-line); border-radius: var(--bm-radius-sm); background: var(--bm-card); font-weight: 600; text-decoration: none; }
.bm-rank a::before { content: counter(bm-rank); flex: none; min-width: 2rem; height: 2rem; padding: 0 0.25rem; border-radius: 999px; background: var(--bm-line); font-size: 0.875rem; font-weight: 800; line-height: 2rem; text-align: center; color: var(--bm-ink); }
.bm-rank a:hover { border-color: var(--bm-accent); }
.bm-rank__name::first-letter { text-transform: uppercase; }
.bm .bm-more { margin: 1.75rem 0 0.5rem; text-align: center; }
.bm .bm-more .bm-btn { padding: 0.625rem 2.25rem; }
.bm .bm-more[hidden], .bm-rank li[hidden] { display: none; }

/* calls to action (online, print, catalog) */
.bm-box-content--band { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1.75rem; align-items: center; margin: 0 0 1.5rem; padding: 1.75rem 2.125rem; }
.bm-box-content--band h2, .bm-box-content--band h3 { margin: 0 0 0.5rem; }
.bm-box-content--band p { color: var(--bm-muted); }

/* questions */
.bm-faq details { margin-bottom: 0.625rem; padding: 0 1.125rem; }
.bm-faq summary { padding: 0.875rem 0; font-weight: 700; cursor: pointer; }
.bm-faq details[open] summary { color: var(--bm-accent); }
.bm-faq details p { margin: 0; padding-bottom: 0.875rem; }

/* the last block of every page: where next */
.bm-box-content--nav { padding: 1.75rem 1.875rem; }
.bm-box-content--nav > h2 { margin: 0 0 1rem; font-size: clamp(1.5rem, 3.4vw, 2rem); }
.bm-hub__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14.375rem, 1fr)); gap: 0.875rem; }
.bm-hub__card { position: relative; display: block; height: 100%; padding: 1.125rem 1.25rem; text-decoration: none !important; color: var(--bm-ink) !important; transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease; }
.bm-hub__card:hover { transform: translateY(-0.1875rem); border-color: var(--bm-accent); box-shadow: var(--bm-shadow); }
.bm-hub__card h3 { margin: 0 0 0.25rem; font-size: 1.0625rem; }
.bm-hub__card p { margin: 0; font-size: 0.875rem; color: var(--bm-muted); }
.bm-hub__card .bm-icon { margin-bottom: 0.625rem; }
.bm-hub__card.is-current { border: 2px solid var(--bm-fill); background: var(--bm-panel); box-shadow: 0 0 0 0.1875rem color-mix(in srgb, var(--bm-fill) 18%, transparent); pointer-events: none; }
.bm-hub__card.is-current::after { content: attr(data-current-label); position: absolute; top: 0.75rem; right: 0.75rem; padding: 0.125rem 0.625rem; border-radius: 999px; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--bm-on-fill); background: var(--bm-fill); }

/* the ad slots (over the whole width) */
.bm-ad { margin: 0 0 1.625rem; }
.bm-ad > div { min-height: 18.75rem; }
.bm-ad--top { --bm-ad-top-height: 6.25rem; margin-bottom: 1.25rem; }
.bm-ad--top > div { min-height: var(--bm-ad-top-height); }
.bm-footer { margin-top: 1.75rem; padding: 0.875rem 1.25rem; text-align: center; }

/* ---------- flags (the same files as the catalog: lang/<id>.svg, countryCode/<CC>.svg) ---------- */
.bm-flag { display: inline-block; width: 1.25rem; height: 1.25rem; margin-right: 0.375rem; vertical-align: -0.25rem; border-radius: 0.1875rem; }
.bm-icon--flag .bm-flag { width: 1.875rem; height: 1.875rem; margin: 0; vertical-align: 0; border-radius: 0.25rem; }
.bm-flaggrid { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.bm-flaglink { display: block; width: 2.75rem; height: 2.75rem; padding: 0.3125rem; border-radius: 0.75rem; }
.bm-flaglink:hover { border-color: var(--bm-accent); }
.bm-flaglink img { display: block; width: 2rem; height: 2rem; border-radius: 0.25rem; }

/* ---------- hall of fame: the navigation on the left, the table on the right ---------- */
.bm-hof { display: grid; grid-template-columns: 15.625rem minmax(0, 1fr); gap: 1.75rem; align-items: start; }
.bm-hof__nav { display: grid; gap: 0.875rem; }
.bm-hof__main h2 { margin: 0 0 0.75rem; }
.bm-filterbox { padding: 0.875rem 1rem; border-radius: 1rem; }
.bm-hof__world { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0.75rem; border-radius: 0.625rem; color: var(--bm-ink) !important; font-weight: 700; text-decoration: none; }
.bm-hof__world.is-active { color: var(--bm-on-fill) !important; background: var(--bm-fill); }
.bm-badge { margin-left: 0.375rem; padding: 0.0625rem 0.5rem; border-radius: 999px; font-size: 0.75rem; background: color-mix(in srgb, var(--bm-on-fill) 25%, transparent); }
.bm-filterlist { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0; padding: 0; list-style: none; }
.bm-filterlist a { display: inline-flex; align-items: center; padding: 0.25rem 0.75rem; border: var(--spacing-1) solid var(--bm-line); border-radius: 999px; font-size: 0.875rem; color: var(--bm-ink) !important; text-decoration: none !important; background: var(--bm-surface); }
.bm-filterlist a:hover { border-color: var(--bm-accent); background: var(--bm-panel); }
.bm-hof .bm-flaggrid { gap: 0.375rem; }
.bm-hof .bm-flaglink { width: 2.375rem; height: 2.375rem; padding: 0.1875rem; border-radius: 0.625rem; }
.bm-hof .bm-flaglink img { width: 1.875rem; height: 1.875rem; }
.bm-stats { margin-top: 1.5rem; }
.bm-stats td:first-child { white-space: nowrap; }
.bm-progress { width: 8.75rem; max-width: 100%; height: 1.375rem; border-radius: 0.375rem; background: var(--bm-line); overflow: hidden; }
.bm-progress span { display: block; height: 100%; padding: 0 0.375rem; line-height: 1.375rem; font-size: 0.75rem; font-weight: 700; text-align: right; color: var(--bm-on-fill); background: var(--bm-positive); }
.bm-vp strong { font-size: 1.125rem; color: var(--bm-vp); }

/* ---------- profile: the three boxes of statistics (world / country / language) ---------- */
.bm-statboxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.875rem; }
.bm-statbox { display: grid; gap: 0.375rem; padding: 1.125rem 1.25rem; color: var(--bm-ink) !important; text-decoration: none !important; }
.bm-statbox:hover { border-color: var(--bm-accent); }
.bm-statbox__title { margin: 0; font-size: 1rem; font-weight: 700; }
data.bm-statbox__rank { font-size: 3rem; font-weight: 800; line-height: 1.1; color: var(--bm-accent); }
.bm-statbox__list { display: grid; gap: 0.375rem; margin: 0; }
.bm-statbox__list div { display: flex; justify-content: space-between; color: var(--bm-muted); }
.bm-statbox__list dd { margin: 0; }
.bm-statbox__vp strong { color: var(--bm-vp); }

/* ---------- small screens ---------- */
@media (max-width: 991px) {
    .bm-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .bm-box-content--hero { padding: 1.375rem 1.125rem; border-radius: 1.25rem; }
    .bm-lead { font-size: 1.0625rem; }
    .bm-split, .bm-split--rev { grid-template-columns: 1fr; gap: 1rem; padding: 1.25rem 0; }
    .bm-split--rev .bm-shots, .bm-split--rev .bm-gallery { order: 0; }
    .bm-box-content--band { grid-template-columns: 1fr; padding: 1.375rem 1.25rem; }
        .bm-btn { justify-content: center; width: 100%; }
    .bm-actions--sm .bm-btn { width: auto; }
    .bm-steps li { padding-left: 3.75rem; }
    .bm-box-content--group, .bm-box-content--nav { padding: 0.25rem 1rem; border-radius: 1.25rem; }
    .bm-section, .bm-answer { padding: 1.25rem 0; }
    .bm-hof { grid-template-columns: minmax(0, 1fr); }
    /* the table first, then the filters (the world / language / country), the notes at the end */
    .bm-hof { gap: 0.875rem; }
    .bm-hof__main { display: contents; }
    .bm-hof__main h2 { margin: 0; }
    .bm-hof__main .bm-stats { margin-top: 0; }
    .bm-hof__nav { order: 2; }
    .bm-hof__main > .bm-note, .bm-hof__main > .bm-message { order: 3; margin: 0; }
}
@media (max-width: 575px) {
    .bm-grid--4 { grid-template-columns: 1fr; }
    .bm-table th, .bm-table td { padding: 0.5rem 0.5rem; font-size: 0.875rem; }
    .bm-table th { font-size: 0.6875rem; letter-spacing: 0; }
    .bm-stats th, .bm-stats td { padding: 0.5rem 0.25rem; font-size: 0.8125rem; }
}

/* visually hidden (the captions of the tables, for screen readers) */
.bm-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }