/* fourdigits — the language switcher, shared by the website and the player app.
   Colours are the brand's own literals rather than either app's variables, so
   the control looks identical in both without either file knowing the other. */

.fd-lang{position:relative;display:inline-flex}
.fd-lang-btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 12px;
  border:1px solid #E2E8F0;background:#fff;border-radius:10px;cursor:pointer;
  font:inherit;font-size:14px;font-weight:600;color:#334155;white-space:nowrap;
  transition:background .15s ease,border-color .15s ease}
.fd-lang-btn:hover{background:#F1F5F9}
.fd-lang-btn[aria-expanded="true"]{border-color:#C7D2FE;background:#EEF2FF;color:#4338CA}
.fd-lang-btn:focus-visible,.fd-lang-opt:focus-visible{outline:2px solid #4F46E5;outline-offset:2px}
.fd-lang-chev{width:14px;height:14px;opacity:.6;flex:none}
.fd-lang-short{font-size:12px;font-weight:800;letter-spacing:.04em}
.fd-lang-name{min-width:0;overflow:hidden;text-overflow:ellipsis}
.fd-lang-name-en{color:#64748B;font-weight:500;font-size:12.5px;margin-left:8px}

.fd-flag{display:inline-block;flex:none;width:22px;height:15px;border-radius:3px;overflow:hidden;
  box-shadow:0 0 0 1px rgba(15,23,42,.12);line-height:0}
.fd-flag svg{display:block;width:100%;height:100%}

.fd-lang-pop{position:absolute;top:calc(100% + 8px);right:0;z-index:1000;width:540px;max-width:calc(100vw - 32px);
  background:#fff;border:1px solid #E2E8F0;border-radius:14px;padding:8px;color:#0F172A;text-align:left;
  box-shadow:0 18px 40px -12px rgba(15,23,42,.22),0 2px 6px rgba(15,23,42,.06)}
.fd-lang-pop[hidden],.fd-lang-scrim[hidden]{display:none!important}
.fd-lang-head{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:8px 10px 10px;border-bottom:1px solid #EEF2F7;margin-bottom:6px}
.fd-lang-head strong{font-size:13px;font-weight:700;color:#0F172A}
.fd-lang-head span{font-size:12px;color:#64748B}
.fd-lang-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px}
.fd-lang-opt{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;
  min-width:0;padding:8px 10px;border:0;border-radius:9px;background:transparent;cursor:pointer;
  font:inherit;color:inherit;text-align:left}
.fd-lang-opt:hover{background:#F1F5F9}
.fd-lang-opt[aria-checked="true"]{background:#EEF2FF}
.fd-lang-text{min-width:0}
.fd-lang-nat{display:block;font-size:14px;font-weight:600;color:#0F172A;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fd-lang-opt[aria-checked="true"] .fd-lang-nat{color:#4338CA}
.fd-lang-en{display:block;font-size:11.5px;color:#64748B;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fd-lang-tick{width:16px;height:16px;color:#4F46E5;visibility:hidden}
.fd-lang-opt[aria-checked="true"] .fd-lang-tick{visibility:visible}
.fd-lang-foot{border-top:1px solid #EEF2F7;margin-top:6px;padding:10px 10px 4px;font-size:12px;color:#64748B}
.fd-lang-scrim{display:none}

/* A form field: the width of its column, opening under itself. */
.fd-lang--field{display:flex;width:100%}
.fd-lang--field .fd-lang-btn{width:100%;height:44px;justify-content:flex-start;font-weight:500;color:#0F172A}
.fd-lang--field .fd-lang-btn .fd-lang-chev{margin-left:auto}
.fd-lang--field .fd-lang-pop{left:0;right:auto;width:100%;max-height:360px;overflow:auto}
.fd-lang--field .fd-lang-grid{grid-template-columns:repeat(2,minmax(0,1fr))}

/* The website header. Most languages run longer than English, and the switcher
   takes room of its own, so the menu never wraps a link onto two lines: the
   switcher drops to its flag first, and past that the menu steps aside
   earlier than it does in English. */
.hdr__lang{display:flex}
.hdr .nav a{white-space:nowrap}
/* A long menu must not win its room by squeezing the logo. */
.hdr .logo,.hdr .logo__img{flex-shrink:0}
@media (max-width:1360px){
  .hdr .fd-lang--full .fd-lang-name{display:none}
  .hdr .fd-lang--full .fd-lang-btn{padding:0 10px;gap:6px}
  .hdr .nav{gap:16px}
  html:not([data-lang="en"]) .hdr .nav{gap:12px}
  html:not([data-lang="en"]) .hdr .nav a{font-size:13.5px}
}
@media (max-width:1100px){
  html:not([data-lang="en"]) .hdr .nav{display:none}
}

/* A phone: a sheet from the bottom, two columns, reachable with a thumb. The
   header button drops the language's name and keeps the flag. */
@media (max-width:560px){
  .fd-lang--full .fd-lang-name{display:none}
  .fd-lang--full .fd-lang-btn{padding:0 10px;gap:6px}
}
@media (max-width:640px){
  .fd-lang-scrim{display:block;position:fixed;inset:0;z-index:999;background:rgba(15,23,42,.42)}
  .fd-lang-pop,.fd-lang--field .fd-lang-pop{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;max-width:none;
    max-height:85vh;overflow:auto;border-radius:20px 20px 0 0;padding:8px 10px calc(14px + env(safe-area-inset-bottom))}
  .fd-lang-pop::before{content:"";display:block;width:40px;height:4px;border-radius:4px;background:#CBD5E1;margin:4px auto 6px}
  .fd-lang-grid,.fd-lang--field .fd-lang-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fd-lang-opt{padding:10px 8px}
}
@media (prefers-reduced-motion:reduce){.fd-lang-btn{transition:none}}

/* A phone, in a language whose "Log in" and "Sign up" run long: the header
   keeps the four-circle mark and drops the wordmark, or the buttons push the
   page sideways. The mark is the left 48 of the logo's 192 units. */
@media (max-width:430px){
  html:is([data-lang="es"],[data-lang="fr"],[data-lang="de"],[data-lang="ru"],[data-lang="vi"],[data-lang="fil"],[data-lang="hi"]) .hdr .logo__img{
    width:28px;height:30px;object-fit:cover;object-position:0 50%}
}
@media (max-width:370px){
  html:is([data-lang="pt"],[data-lang="it"],[data-lang="tr"],[data-lang="th"],[data-lang="ko"]) .hdr .logo__img{
    width:28px;height:30px;object-fit:cover;object-position:0 50%}
}

/* Small phones: a long translated heading or button label wraps instead of
   widening the page. */
@media (max-width:430px){
  .hero__grid>*{min-width:0}
  .hero h1{overflow-wrap:break-word}
  .hero__cta .btn,.sec .btn--lg{white-space:normal;text-align:center}
}

/* A narrow phone inside the player app: the top bar's balance, bell and
   avatar leave no room for the language code, so the flag alone says it. */
@media (max-width:420px){
  .ld-tb .fd-lang--compact .fd-lang-short{display:none}
  .ld-tb .fd-lang--compact .fd-lang-btn{padding:0 8px;gap:4px}
}