/* Нижняя панель разделов на телефоне (13.10, bottomnav.js). На ПК и от 768 px её нет вовсе; в открытой партии JS её
   прячет (body без .has-bottom-nav) — вся высота под текст. Цвета — от темы, плашка плотная, чтобы подписи читались
   поверх любого задника. env(safe-area-inset-bottom) — отступ под «домашнюю» полосу телефона. */
.igra-bottom-nav { display: none; }

@media (max-width: 767.98px) {
  .igra-bottom-nav:not([hidden]) {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    padding: 0 2px env(safe-area-inset-bottom); box-sizing: border-box;
    background: color-mix(in srgb, var(--bg) 92%, var(--text));
    border-top: 1px solid var(--border-strong);
    box-shadow: 0 -8px 24px -12px rgba(0, 0, 0, .55);
  }
  .igra-bn-item {
    flex: 1 1 0; min-width: 0; min-height: 56px; padding: 7px 0 6px; position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    background: transparent; border: 0; border-radius: 12px; cursor: pointer;
    color: var(--text); font: inherit; -webkit-tap-highlight-color: transparent;
  }
  .igra-bn-ic { width: 24px; height: 24px; flex: none; display: block; fill: none; stroke: currentColor; }
  .igra-bn-t { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -.01em;
    font-size: clamp(.6rem, 3.2vw, .72rem); line-height: 1.25; font-weight: 600; /* 1.25: хвосты р и у не режутся overflow; кегль от ширины, чтобы «Персонажи» входило и на 320 */ }
  .igra-bn-item:focus-visible { outline: 2px solid var(--gold-2); outline-offset: -2px; }
  .igra-bn-item.is-active { font-weight: 800; background: color-mix(in srgb, var(--gold) 22%, transparent); }
  .igra-bn-item.is-active .igra-bn-t { font-weight: 700; }
  .igra-bn-item.is-active::before { /* полоска над активным пунктом: видно не только цветом */
    content: ''; position: absolute; top: 0; left: 24%; right: 24%; height: 3px; border-radius: 0 0 3px 3px; background: var(--gold-2);
  }
  /* место под панель: последняя строка страницы не прячется за ней */
  body.has-bottom-nav .igra-main { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  /* поднимается клавиатура: панель уходит, поле ввода получает всю высоту */
  body.kbd-open .igra-bottom-nav { display: none; }
  body.kbd-open.has-bottom-nav .igra-main { padding-bottom: 24px; }
}