/* =====================================================================
   i18n.css — ПЕРЕМИКАЧ МОВИ НА ТИТУЛЬНОМУ ЕКРАНІ.

   Дві половинки однієї пігулки, а не кнопка, що по черзі показує то
   одну мову, то другу. Різниця не косметична: кнопка-перемикач ніколи
   не каже, ЩО саме вона зараз показує — чинну мову чи ту, на яку
   перемкне, — і гравець читає її навпаки рівно в половині випадків.
   Тут обидві мови видно одночасно, а активна підсвічена.

   Стоїть у лівому нижньому куті — дзеркально до «СКИНУТИ» праворуч
   (css/system-blue.css). Обидві дрібні дії кадру внизу, обидві не
   сперечаються з «ГРАТИ» в небі.
===================================================================== */

#menu .lang-switch {
  position: absolute;
  left: 10px;
  bottom: 12px;
  z-index: 3;
  display: flex;
  gap: 3px;
  padding: 3px;
  border-radius: 999px;
  /* Та сама «пластикова» подача, що й у решти елементів казуального
     скіна: світлий кант, темний торець під ним. */
  background: linear-gradient(180deg, #17406e, #0d2949);
  border: 2px solid #4d90d6;
  box-shadow: inset 0 2px rgba(255, 255, 255, .18), 0 4px #071b31, 0 8px 14px rgba(0, 0, 0, .38);
  -webkit-tap-highlight-color: transparent;
}

#menu .lang-switch .lang-opt {
  margin: 0;
  padding: 6px 12px 7px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #a9c8e8;
  font: 800 11px/1 system-ui, sans-serif;
  letter-spacing: .06em;
  cursor: pointer;
  transition: background .14s ease, color .14s ease, box-shadow .14s ease;
  -webkit-tap-highlight-color: transparent;
}

/* Активна половинка — світла плашка. Колір той самий, що й у кнопки
   «ГРАТИ», тому екран лишається двоколірним. */
#menu .lang-switch .lang-opt.on {
  background: linear-gradient(180deg, #ffd35c, #f0a91d);
  color: #2a1400;
  text-shadow: 0 1px rgba(255, 255, 255, .45);
  box-shadow: inset 0 2px rgba(255, 255, 255, .55), 0 2px #8a5a00;
}

#menu .lang-switch .lang-opt:active { transform: translateY(1px); }

/* На дуже вузьких екранах пігулка мусить лишитись пігулкою, а не
   з'їхати під кнопку скидання. */
@media (max-width: 340px) {
  #menu .lang-switch .lang-opt { padding: 5px 9px 6px; font-size: 10px; }
}