/* The language picker: the nav button (modules/i18n/picker.js) and its dialog (public/assets/js/i18n/i18n.js).
   Colours come from the site's theme variables (style.css: dark by default, :root.light-theme for light), with
   dark fallbacks for the overview pages, which do not define them. The dialog follows .confirm-modal*
   (webapp/friends.css). */

.uvLangBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    height: 40px;
    margin: 0;
    padding: 0 .875em 0 .625em;
    border: 2px solid var(--theme-background, #171717);
    border-radius: .625em;
    background: var(--theme-background, #171717);
    box-shadow: inset 0 4px 12px var(--boxsh1, #000a),
                inset 0 -4px 8px var(--boxsh2, #0006),
                inset 0 0 20px   var(--boxsh3, #0003);
    color: var(--theme-textColor-1, #ffffff);
    font-family: im, ir, sans-serif;
    font-size: 1em;
    line-height: 1;
    white-space: nowrap;
    cursor: var(--cursorp, pointer);
    transition: .1s;
    -webkit-appearance: none;
    appearance: none;
}

.uvLangBtn:hover { border-color: var(--theme-backgroundWhite-1, #ffffff); }
.uvLangBtn:focus-visible { outline: 2px solid var(--Blue-VibrantNeutral, #3990FF); outline-offset: 2px; }

.uvLangBtn .uvLangIcon {
    width: 1.5em;
    height: 1.5em;
    filter: var(--f-white-1, brightness(0) saturate(100%) invert(98%));
}

.uvLangBtn .uvLangName { max-width: 10em; overflow: hidden; text-overflow: ellipsis; }

/* The top nav scales its buttons on hover; the pill only brightens its border. */
.topNav .content .uvLangBtn.navBtn:hover { scale: 1; }

/* Floating button: overview pages (under the Play button once it shows) and pages without a nav. */
.uvLangFloat {
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 21;
    transition: top .2s;
}

.topNav.playBtn.scrolled + .uvLangFloat { top: calc(1.5rem + 68px + .75rem); }

.uvLangFloat .uvLangBtn {
    height: 44px;
    border-color: #0000;
    background: #0009;
    box-shadow: 0 4px 16px #0006;
    color: #ffffff;
    backdrop-filter: blur(4px);
}

.uvLangFloat .uvLangBtn .uvLangIcon { filter: brightness(0) saturate(100%) invert(98%); }
.uvLangFloat .uvLangBtn:hover { border-color: #ffffff; }

/* The docs top nav is denser. */
#docPage .topNav .uvLangBtn { height: 2.25rem; }

/* The older panel pages' header (contact/tester/developer forms, job applications, patch notes...): next to
   their round buttons, 2vw squares (modules/i18n/picker.js). */
.uvLangBtn.uvLangCompact {
    height: max(2vw, 24px);
    padding: 0 max(.6vw, 6px) 0 max(.45vw, 4px);
    gap: max(.35vw, 3px);
    border-radius: max(.52vw, 4px);
    font-size: max(.833vw, 11px);
}

/* ------------------------------------------------------------------ dialog */

html.uvLangOpen, html.uvLangOpen body { overflow: hidden; }

.uvLangModal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    font-family: ir, sans-serif;
}

.uvLangOverlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #002854aa, #000a, #420F3Aaa);
    backdrop-filter: blur(4px);
    cursor: var(--cursord, default);
}

.uvLangCard {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(420px, 100%);
    max-height: min(560px, calc(100dvh - 32px));
    padding: 24px;
    box-sizing: border-box;
    border-radius: 12px;
    background: var(--theme-backgroundLight-4, #2d2d2d);
    box-shadow: 0 10px 40px rgba(0, 0, 0, .2);
    color: var(--theme-textColor-1, #ffffff);
    animation: uvLangIn .2s ease-out;
}

@keyframes uvLangIn {
    from { transform: scale(.9); opacity: 0; }
    to   { transform: scale(1);  opacity: 1; }
}

.uvLangHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.uvLangTitle {
    margin: 0;
    font-family: ib, rb, sans-serif;
    font-size: 20px;
    color: var(--theme-textColor-1, #ffffff);
}

.uvLangClose {
    width: 36px;
    height: 36px;
    flex: none;
    border: 0;
    border-radius: 8px;
    background: var(--theme-backgroundLight-6, #444444);
    color: var(--theme-textColor-1, #ffffff);
    font-size: 22px;
    line-height: 1;
    cursor: var(--cursorp, pointer);
    transition: .1s;
}

.uvLangClose:hover { background: var(--theme-backgroundLight-8, #666666); }

.uvLangList {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0 4px 0 0;
    list-style: none;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.uvLangItem { margin: 0; padding: 0; }

.uvLangOption {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "native check" "english check";
    align-items: center;
    width: 100%;
    min-height: 52px;
    padding: 8px 14px;
    box-sizing: border-box;
    border: 2px solid transparent;
    border-radius: 8px;
    background: var(--theme-backgroundLight-2, #202020);
    color: var(--theme-textColor-1, #ffffff);
    text-align: start;
    font: inherit;
    cursor: var(--cursorp, pointer);
    transition: background .1s, border-color .1s;
}

.uvLangOption:hover { background: var(--theme-backgroundLight-6, #444444); }
.uvLangOption:focus-visible { outline: none; border-color: var(--Blue-VibrantNeutral, #3990FF); }
.uvLangOption.current { border-color: var(--Purple-VibrantNeutral, #8D78FF); }

.uvLangNative {
    grid-area: native;
    font-family: im, ir, sans-serif;
    font-size: 17px;
}

.uvLangEnglish {
    grid-area: english;
    margin-top: 2px;
    font-size: 13px;
    color: var(--theme-textColor-5, #A4A2A2);
}

.uvLangCheck {
    grid-area: check;
    margin-inline-start: 12px;
    font-size: 18px;
    color: var(--Purple-VibrantNeutral, #8D78FF);
}

.uvLangLoading {
    padding: 12px 4px;
    color: var(--theme-textColor-5, #A4A2A2);
}

.uvLangStatus:not(:empty) {
    margin-top: 12px;
    font-size: 14px;
    color: var(--theme-textColor-4, #cccccc);
}

.uvLangList::-webkit-scrollbar { width: 6px; }
.uvLangList::-webkit-scrollbar-thumb { background-color: var(--theme-gray-1, #868c98); border-radius: 6px; }

@media screen and (max-width: 599px) {
    .uvLangBtn { height: 36px; padding: 0 .625em 0 .5em; gap: .375em; }
    .uvLangBtn .uvLangName { max-width: 6em; font-size: .875em; }
    .topNav .content .uvLangBtn .uvLangName { display: none; }
    .uvLangFloat { top: 1rem; right: 1rem; }
    .topNav.playBtn.scrolled + .uvLangFloat { top: calc(1.5rem + 60px + .5rem); }
    .uvLangModal { align-items: flex-end; padding: 0; }
    .uvLangCard {
        width: 100%;
        max-height: 85dvh;
        padding: 20px 16px calc(16px + env(safe-area-inset-bottom, 0px));
        border-radius: 16px 16px 0 0;
        animation: uvLangUp .2s ease-out;
    }
}

@keyframes uvLangUp {
    from { transform: translateY(40px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .uvLangCard, .uvLangFloat { animation: none; transition: none; }
}