/* PC bottom bar extras: exit pill (left) and PT-BR / EN switch (right), same look as the tab buttons. */

html:not(.battlemon-mobile) .nav-btn-home {
  --tab-color: #f87171; --tab-tint: #5f1d26;
  left: .7rem; bottom: .4rem;
  width: auto; height: 2.125rem; padding: .3125rem .75rem .3125rem .6rem; gap: .4rem;
  border: .0625rem solid var(--tab-color); border-radius: .5rem;
  background: linear-gradient(155deg, var(--tab-tint), #101a30);
  color: #f0f5ff;
  box-shadow: inset 0 .0625rem rgba(255,255,255,.16), 0 .1875rem 0 #050914;
  transition: transform .15s, box-shadow .15s, filter .15s;
}
html:not(.battlemon-mobile) .nav-btn-home .ui-svg-icon { width: 1.0625rem; height: 1.0625rem; color: var(--tab-color); }
html:not(.battlemon-mobile) .nav-btn-home .tab-label { font: 800 .67rem var(--font-pixel-ui); letter-spacing: 0; white-space: nowrap; text-transform: uppercase; }
html:not(.battlemon-mobile) .nav-btn-home:hover {
  background: linear-gradient(155deg, var(--tab-tint), #1b2944);
  border-color: var(--tab-color);
  box-shadow: inset 0 .0625rem rgba(255,255,255,.22), 0 .1875rem 0 #050914, 0 0 .625rem color-mix(in srgb, var(--tab-color) 25%, transparent);
  transform: translateY(-.125rem); filter: brightness(1.18);
}
html:not(.battlemon-mobile) .nav-btn-home:active { transform: translateY(.0625rem); }

/* Language switch */
.lang-switch { display: none; }
html:not(.battlemon-mobile) .lang-switch {
  position: fixed; right: .7rem; bottom: .4rem; z-index: 81;
  display: flex; align-items: center; gap: .3rem;
}
/* i18n.js hides the switch when neither the main menu nor the bottom tab bar is showing. */
.lang-switch.is-hidden, .in-battle-screen .lang-switch { display: none !important; }
/* Main menu: same bottom-right spot as in game; the version moves to the bottom left. */
html:not(.battlemon-mobile) .in-home-screen .lang-switch { bottom: clamp(.5rem, 1.4dvh, .9rem); right: clamp(1rem, 2.5vw, 2rem); }
html:not(.battlemon-mobile) .title-footer-version { right: auto; left: clamp(1rem, 2.5vw, 2rem); }

.lang-option {
  --tab-color: #64748b; --tab-tint: #1c2638;
  position: relative; display: inline-flex; align-items: center; gap: .4rem;
  height: 2.125rem; padding: .3125rem .65rem .3125rem .5rem;
  border: .0625rem solid #33425c; border-radius: .5rem;
  background: linear-gradient(155deg, var(--tab-tint), #0d1526);
  color: #7c8ba3; cursor: pointer;
  box-shadow: inset 0 .0625rem rgba(255,255,255,.08), 0 .1875rem 0 #050914;
  transition: transform .15s, box-shadow .2s, filter .2s, border-color .2s, color .2s;
}
.lang-option .lang-flag { width: 1.35rem; height: auto; border-radius: .15rem; flex-shrink: 0; filter: grayscale(1) brightness(.6); opacity: .7; transition: filter .2s, opacity .2s; box-shadow: 0 0 0 1px #0007; }
.lang-option .lang-code { font: 800 .67rem var(--font-pixel-ui); letter-spacing: .02em; white-space: nowrap; }
.lang-option:hover:not(.is-active) { color: #cbd5e1; border-color: #4b5d7d; transform: translateY(-.125rem); }
.lang-option:hover:not(.is-active) .lang-flag { filter: grayscale(.3); opacity: .95; }
.lang-option.is-active {
  --tab-color: #4ade80; --tab-tint: #14503a;
  border-color: var(--tab-color); color: #fff; cursor: default;
  box-shadow: inset 0 .0625rem rgba(255,255,255,.2), 0 .1875rem 0 #050914, 0 0 .7rem color-mix(in srgb, var(--tab-color) 35%, transparent);
}
.lang-option.is-active .lang-flag { filter: none; opacity: 1; }
.lang-option.is-active::after {
  content: ''; position: absolute; top: -.3rem; right: -.3rem; width: .8rem; height: .8rem; border-radius: 50%;
  background: #22c55e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / 70% no-repeat;
  border: .1rem solid #0b1222; box-shadow: 0 0 .4rem #22c55e99;
}
.lang-swap {
  display: grid; place-items: center; width: 1.9rem; height: 1.9rem; padding: 0;
  border: .0625rem solid #fbbf24; border-radius: 50%;
  background: linear-gradient(155deg, #564016, #101a30); color: #fbbf24; cursor: pointer;
  box-shadow: inset 0 .0625rem rgba(255,255,255,.16), 0 .1875rem 0 #050914;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), filter .15s;
}
.lang-swap svg { width: 1rem; height: 1rem; }
.lang-swap:hover { filter: brightness(1.2); transform: rotate(180deg); }
.lang-swap:focus-visible, .lang-option:focus-visible { outline: .125rem solid #fff; outline-offset: .1875rem; }