@layer reset {
    *, *::before, *::after { box-sizing: border-box; }

    * { margin: 0; }

    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    body {
        min-block-size: 100svh;
        -webkit-font-smoothing: antialiased;
    }

    img, picture, svg, video, canvas {
        display: block;
        max-inline-size: 100%;
        block-size: auto;
    }

    input, button, textarea, select {
        font: inherit;
        color: inherit;
    }

    /* Long team names and unbroken ids should wrap rather than force the page
       to scroll sideways. */
    p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

    /* Opt in per element instead. Removing it wholesale from tables breaks the
       zebra striping and rules the breakdown views depend on. */
    ul[role='list'], ol[role='list'] {
        list-style: none;
        padding: 0;
    }

    :target { scroll-margin-block-start: 5rem; }

    @media (prefers-reduced-motion: no-preference) {
        html { scroll-behavior: smooth; }
    }

    /* A visible, high-contrast focus ring everywhere. The scoreboard is
       navigable entirely by keyboard because every interaction is a link. */
    :focus-visible {
        outline: 2px solid var(--focus);
        outline-offset: 2px;
        border-radius: var(--radius-1);
    }

    /* ...except on programmatic focus targets.

       Blazor stamps tabindex="-1" on the first <h1> and focuses it after
       enhanced navigation, so screen reader users land on the new content
       rather than back at the top of the chrome. Chrome sometimes resolves
       that programmatic focus as :focus-visible, which paints a ring around
       the page heading on load -- an affordance nobody asked for, pointing at
       something nobody can interact with.

       tabindex="-1" means an element is NOT reachable by Tab, so any focus it
       receives is programmatic by definition and the ring is always
       incidental. The same applies to #main, the skip-link target: a 2px
       outline around the entire content region is noise, and the jump itself
       is the feedback.

       Genuine keyboard focus is untouched, because everything that can be
       tabbed to is either natively focusable or has a non-negative tabindex. */
    [tabindex='-1']:focus,
    [tabindex='-1']:focus-visible {
        outline: none;
    }
}