/* The flag menu (_LangPicker). Flags are emoji; Windows has no flag glyphs, so the Twemoji country-flag font is loaded for
   exactly the regional-indicator code points (it holds nothing else, so all other text keeps its own font). */
@font-face {
    font-family: "Twemoji Country Flags";
    unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F;
    src: url("https://cdn.jsdelivr.net/npm/country-flag-emoji-polyfill@0.1.8/dist/TwemojiCountryFlags.woff2") format("woff2");
    font-display: swap;
}
.sg-flag { font-family: "Twemoji Country Flags", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-size: 1.15em; line-height: 1; }

.sg-lang { position: relative; flex-shrink: 0; font-family: var(--body, Inter, system-ui, sans-serif); }
.sg-lang__btn {
    display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 10px; border-radius: 12px; cursor: pointer;
    border: 1px solid var(--line, rgba(140, 170, 255, .13)); background: transparent; color: var(--ink, #eef1ff);
    font: 600 13px/1 var(--body, Inter, system-ui, sans-serif); letter-spacing: .04em; transition: border-color .15s, background .15s;
}
.sg-lang__btn:hover, .sg-lang.is-open .sg-lang__btn { border-color: var(--line-hi, rgba(140, 200, 255, .32)); background: rgba(34, 211, 238, .06); }
.sg-lang__btn:focus-visible, .sg-lang__opt:focus-visible { outline: 2px solid var(--cyan, #22d3ee); outline-offset: 2px; }
.sg-lang__code { color: var(--ink-2, #c8cdea); }

.sg-lang__menu {
    display: none; position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; width: 270px; max-height: min(70vh, 520px);
    overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: 6px; border-radius: 14px;
    background: var(--panel-solid, #10162f); border: 1px solid var(--line-hi, rgba(140, 200, 255, .32));
    box-shadow: var(--shadow, 0 18px 50px rgba(0, 0, 0, .45)); scrollbar-width: thin; scrollbar-color: rgba(140, 170, 255, .25) transparent;
}
.sg-lang__menu::before { content: ""; display: block; height: 2px; margin: -6px -6px 6px; background: var(--brand, linear-gradient(90deg, #22d3ee, #8b5cf6 55%, #ec4899)); border-radius: 14px 14px 0 0; }
.sg-lang.is-open .sg-lang__menu { display: block; }
.sg-lang__opt {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 9px; cursor: pointer;
    background: transparent; color: var(--ink, #eef1ff); text-align: start; font: 500 14px/1.2 var(--body, Inter, system-ui, sans-serif);
}
.sg-lang__opt:hover { background: rgba(140, 170, 255, .09); }
.sg-lang__opt.is-on { background: rgba(34, 211, 238, .12); box-shadow: inset 0 0 0 1px rgba(34, 211, 238, .35); }
.sg-lang__name { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.sg-lang__name b { font-weight: 600; }
.sg-lang__name small { font-size: 12px; color: var(--mute, #8f98c0); }
.sg-lang__tick { color: var(--cyan, #22d3ee); font-weight: 700; }

/* the header: just the flag on small screens */
@media (max-width: 560px) {
    .sg-lang__code { display: none; }
    .sg-lang__btn { padding: 0 9px; }
}

/* the game pages: a small, see-through button in the bottom-left corner (lifted clear of the rooms' bottom bars; a page can
   move it with --sg-lang-bottom), above the 3D canvas, below the dialogs */
.sg-lang-float, .sg-lang.sg-lang--float { position: fixed; left: max(10px, env(safe-area-inset-left)); bottom: calc(var(--sg-lang-bottom, 58px) + env(safe-area-inset-bottom, 0px)); z-index: 2147483500; width: auto; }
.sg-lang-float .sg-lang { position: relative; }
.sg-lang-float .sg-lang__btn, .sg-lang--float .sg-lang__btn {
    height: 32px; padding: 0 8px; border-radius: 10px; font-size: 11px; opacity: .55;
    background: rgba(6, 8, 20, .55); border-color: rgba(140, 200, 255, .22); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    transition: opacity .15s, border-color .15s;
}
.sg-lang-float .sg-lang__btn:hover, .sg-lang-float .sg-lang.is-open .sg-lang__btn,
.sg-lang--float .sg-lang__btn:hover, .sg-lang--float.is-open .sg-lang__btn { opacity: 1; }
.sg-lang-float .sg-lang__menu, .sg-lang--float .sg-lang__menu { top: auto; bottom: calc(100% + 8px); right: auto; left: 0; max-height: min(60vh, 460px); }
html[dir="rtl"] .sg-lang__menu { right: auto; left: 0; }