/* Allow content to shrink and wrap instead of making the page wider than a phone. */
main { min-width: 0; overflow-wrap: anywhere; }
main .grid > *, main .flex > * { min-width: 0; }
.mobile-navigation summary::-webkit-details-marker { display: none; }
:where(a, button, input, select, textarea, summary):focus-visible {
    outline: 2px solid #53fc18;
    outline-offset: 3px;
}
.tournament-status { max-width: 100%; text-align: center; }
@media (max-width: 767px) {
    main { padding-top: 1.5rem; }
    main .p-8 { padding: 1.25rem; }
    main .p-16 { padding: 2rem 1.25rem; }
    main input, main select, main textarea { font-size: 16px; }
    main button, main a.inline-flex { min-height: 44px; }
    .tournament-facts li { display: block; line-height: 1.75; }
    .brand-name { font-size: clamp(11px, 3.7vw, 20px); }
}
@media (max-width: 1023px) {
    .tournament-bracket > .bracket-grid > * { order: var(--mobile-order); }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    html { scroll-behavior: auto !important; }
}