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

html {
    max-width: 100%;
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: calc(56px + env(safe-area-inset-top, 0px));
}

body {
    min-width: 0;
    max-width: 100%;
    overflow-x: clip;
}

main,
section,
article,
aside,
header,
footer,
.content,
.main-container,
.options-container {
    min-width: 0;
}

img,
svg,
canvas,
video,
iframe {
    max-width: 100%;
}

img,
video {
    height: auto;
}

button,
[role="button"],
a,
input,
select,
textarea {
    touch-action: manipulation;
}

input,
select,
textarea,
button {
    max-width: 100%;
    font: inherit;
}

input,
select,
textarea {
    font-size: 1rem;
}

a,
button,
[role="button"],
label {
    -webkit-tap-highlight-color: rgba(0, 188, 212, 0.18);
}

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(0, 188, 212, 0.72);
    outline-offset: 3px;
}

[hidden],
template {
    display: none !important;
}

.option-button,
.join-game,
.footer-link,
.sidebar-toggle,
.sidebar-close,
.clear-icon,
.close,
.personal-link-icon,
dialog button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
    min-height: 44px;
}

.personal-link-icon {
    min-width: 44px;
}

.option-button,
.join-game {
    white-space: normal;
    overflow-wrap: anywhere;
}

.visually-hidden {
    overflow: hidden !important;
}

@supports (height: 100dvh) {
    .modal,
    dialog[open] {
        max-height: 100dvh;
    }
}

@media (hover: none), (pointer: coarse) {
    a:hover,
    button:hover,
    [role="button"]:hover,
    .option-button:hover,
    .join-game:hover,
    .footer-link:hover,
    .leaderboard table tbody tr:hover,
    .track-card:hover {
        transform: none !important;
    }

    .badge-class:hover,
    .modal-badge-item:hover .modal-badge-name {
        transform: none !important;
    }
}

@media (max-width: 768px) {
    body {
        min-height: 100svh;
    }

    main {
        width: 100%;
        padding-left: max(1rem, env(safe-area-inset-left, 0px));
        padding-right: max(1rem, env(safe-area-inset-right, 0px));
    }

    h1,
    h2,
    h3,
    .bannertext {
        overflow-wrap: anywhere;
        text-wrap: balance;
    }

    table {
        max-width: 100%;
    }

    .dialog,
    .modal {
        width: 100%;
        max-width: 100vw;
    }

    .dialog-content,
    dialog {
        max-width: calc(100vw - 1.5rem);
        max-height: calc(100dvh - 1.5rem);
    }

    .autocomplete-items,
    .suggestions,
    [role="listbox"] {
        max-height: min(44vh, 18rem);
        overscroll-behavior: contain;
    }

    .leaderboard-view-switcher .view-badge,
    .join-game.scrolled-button {
        min-height: 44px;
    }
}

@media (max-width: 900px) {
    a.badge-class,
    .badge-class.badge-clickable,
    .badge-class[data-clickable="true"] {
        min-width: 44px;
        min-height: 44px;
    }
}

@media (max-width: 420px) {
    main {
        padding-left: max(0.875rem, env(safe-area-inset-left, 0px));
        padding-right: max(0.875rem, env(safe-area-inset-right, 0px));
    }

    .option-button {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media (max-width: 932px) and (max-height: 480px) and (orientation: landscape) {
    main {
        margin-top: 1rem;
    }

    .dialog-content,
    dialog {
        max-height: calc(100dvh - 1rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
    }
}