html:not(.static-render):has(.overlay.ssr),
html:not(.static-render):has(.overlay.ssr) * {
    cursor: wait !important;
}

html.static-render .overlay {
    display: none;
}

.overlay {
    backdrop-filter: grayscale(1) saturate(1) brightness(0.95);
    user-select: none;
    z-index: 999;
    position: fixed;
    height: 100vh;
    width: 100vw;
    opacity: 0.5;
}

    .overlay.csr {
        animation: interactivity-fade 0.8s ease forwards;
        pointer-events: none;
    }

@keyframes interactivity-fade {
    from {
        opacity: 0.5;
    }

    to {
        opacity: 0.0;
    }
}

.app-loading-container {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (min-width: 600px) {
    .app-loading-container {
        justify-content: flex-end;
        align-items: flex-end;
        padding: 24px;
    }
} 

.app-loading-indicator {
    position: relative;
    width: 96px;
    height: 96px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1001;
}

.app-loading-logo {
    width: 65%;
    height: auto;
    z-index: 1002;
}

.app-loading-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px solid transparent;
    animation: steady-spin 1.2s linear infinite, liquid-cycle 4s ease-in-out infinite;
    z-index: 1003;
}

@keyframes steady-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes liquid-cycle {
    0%, 100% {
        border-top-color: #28689d;
        border-bottom-color: #f4846f;
    }

    25% {
        border-top-color: #f89969;
        border-bottom-color: transparent;
    }

    50% {
        border-top-color: #f4846f;
        border-bottom-color: #28689d;
    }

    75% {
        border-top-color: transparent;
        border-bottom-color: #f89969;
    }
}

img {
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.scroller::-webkit-scrollbar {
    display: none;
}

.scroller {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

a {
    cursor: pointer;
}

.fade-in-quick {
    opacity: 0;
    animation: fadeIn 0.5s ease forwards;
}

.fade-in {
    opacity: 0;
    animation: fadeIn 0.8s ease forwards;
}

.fade-in-slow {
    opacity: 0;
    animation: fadeIn 2s ease forwards;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

.txt-ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block !important;
}

.emoji {
    font-family: "Noto Color Emoji", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.stat {
    display: flex;
    align-items: center;
}

    .stat span {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

.front {
    padding: 16px !important;
    position: relative;
}

.elevate-on-hover {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
    /* Lift slightly with shadow on hover */
    .elevate-on-hover:hover {
        transform: translateY(-2px);
        box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.1);
    }

.pointer {
    cursor: pointer;
}

.inline-link, .external-link {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    text-decoration: none;
    background: rgba(0, 0, 0, 0.05);
    color: inherit;
    transition: background 0.15s, color 0.15s;
}

    .inline-link:hover, .inline-link:focus, .external-link:hover, .external-link:focus {
        background: rgba(0, 0, 0, 0.02);
        filter: brightness(1.2)
    }

/* An inline-link that leaves the site - opens in a new tab */
.external-link::after {
    content: "";
    display: inline-block;
    width: 0.9em;
    height: 0.9em;
    margin-left: 4px;
    vertical-align: -0.1em;
    background-color: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z'/%3E%3C/svg%3E") center / contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Mobile */
@media (max-width: 600px) {
    .mud-appbar {
        position: sticky !important;
        top: 0;
    }
}

@media (min-width: 960px) {
    .maxwidth-md {
        max-width: 960px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Mimics a MudItem xs=12 sm=6 lg=4 inside a MudGrid with spacing=6 */
.auto-item {
    display: flex;
    flex-grow: 0;
    position: relative;
    box-sizing: border-box;
    margin: 0 24px 0 24px;
}

    .auto-item:first-child {
        margin-left: 0;
    }

    .auto-item:last-child {
        margin-right: 0;
    }

/* xs = 12 */
@media (min-width: 0px) {
    .auto-item {
        min-width: calc(100% / 12 * 12 - 24px);
        max-width: calc(100% / 12 * 12 - 24px);
        flex-basis: calc(100% / 12 * 12 - 24px);
    }
}

/* sm = 6 */
@media (min-width: 600px) {
    .auto-item {
        min-width: calc(100% / 12 * 6 - 24px);
        max-width: calc(100% / 12 * 6 - 24px);
        flex-basis: calc(100% / 12 * 6 - 24px);
    }
}

/* lg = 4 */
@media (min-width: 1280px) {
    .auto-item {
        min-width: calc(100% / 12 * 4 - 24px);
        max-width: calc(100% / 12 * 4 - 24px);
        flex-basis: calc(100% / 12 * 4 - 24px);
    }
}

/* Markdown Support */
/* Paragraphs */
.klx-md p {
    margin: 1.2em 0 0;
}

    .klx-md p:first-child {
        margin-top: 0;
    }

/* Headings */
.klx-md h1,
.klx-md h2,
.klx-md h3,
.klx-md h4,
.klx-md h5,
.klx-md h6 {
    font-weight: 500;
    line-height: 1.3;
    margin-top: 2rem;
    margin-bottom: 0.5rem;
}

.klx-md h1 {
    font-size: 1.8rem;
}

.klx-md h2 {
    font-size: 1.5rem;
    border-bottom: 1px solid #eee;
    padding-bottom: 0.2rem;
}

.klx-md h3 {
    font-size: 1.25rem;
}

.klx-md h4 {
    font-size: 1.1rem;
}

.klx-md h1:first-child,
.klx-md h2:first-child {
    margin-top: 0;
    border: none;
}

/* Emphasis & Strong */
.klx-md em {
    color: #444;
}

.klx-md strong {
    font-weight: 600;
}

/* Links */
.klx-md a {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    text-decoration: none;
    background: rgba(0, 0, 255, 0.05);
    color: inherit;
    transition: background 0.15s, color 0.15s;
}

    .klx-md a:hover,
    .klx-md a:focus {
        background: rgba(0, 0, 255, 0.02);
        filter: brightness(1.2)
    }

/* Lists */
.klx-md ul,
.klx-md ol {
    margin: 1.2em 0 1.2em 1.5em;
    padding: 0;
}

.klx-md li {
    margin: 0.4em 0;
}

/* Tables */
.klx-md table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5em 0;
    font-size: 0.95rem;
}

.klx-md th,
.klx-md td {
    border: 1px solid #ddd;
    padding: 0.6em 0.8em;
    text-align: left;
}

.klx-md th {
    background: #f9f9f9;
    font-weight: 600;
}

.klx-md tr:nth-child(even) {
    background: #fcfcfc;
}

/* Blockquotes */
.klx-md blockquote {
    margin: 1.5em 0;
    padding: 0.8em 1em;
    border-left: 4px solid #ccc;
    background: #f9f9f9;
    font-style: italic;
    color: #555;
}

/* Images */
.klx-md img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1.5em auto;
    vertical-align: middle;
}

.game-item {
    display: flex !important;
    position: relative;
}

.sub-item {
    margin: 12px 0px 0px 0px;
}

    .sub-item .image {
        filter: grayscale(80%);
    }

.sticky-btn {
    position: fixed !important;
    bottom: 0;
    left: 0;
    z-index: 1000;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.loading-wave {
    position: relative;
    overflow: hidden;
    background-color: var(--mud-palette-skeleton) !important;
    pointer-events: none;
    user-select: none;
}

    .loading-wave::after {
        content: "";
        position: absolute;
        z-index: 10000;
        inset: 0;
        transform: translateX(-100%);
        background-image: linear-gradient( 90deg, transparent, rgba(0, 0, 0, 0.1), transparent );
        animation: mud-skeleton-keyframes-wave 1.6s linear 0.5s infinite;
    }