/* Нижнее меню в стиле «жидкое стекло» (как в Telegram): полупрозрачная панель с размытием фона,
   светлая кромка и блик сверху, активный пункт подсвечен стеклянной «линзой».
   Разметка: <nav class="navBottom"><a href=".." class="on"><svg class="ico"><use href="#ni-games"/></svg>Игры</a>...</nav>
   Иконки: assets/nav-icons.svg (games, inventory, profile) встраиваются в страницы командой node backend/scripts/sync-nav-icons.js; в разметке <svg class="ico"><use href="#ni-games"/></svg>. */
.navBottom{position:fixed;left:50%;bottom:calc(10px + var(--safe));transform:translateX(-50%);display:grid;grid-template-columns:repeat(3,1fr);gap:4px;width:min(500px,calc(100% - 24px));padding:5px;border-radius:34px;z-index:90;isolation:isolate;
  background:linear-gradient(180deg,rgba(255,255,255,.16) 0,rgba(255,255,255,.04) 42%,rgba(255,255,255,.07) 100%),rgba(120,16,32,.2);
  -webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);
  border:1px solid rgba(255,255,255,.17);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(255,255,255,.07),inset 0 0 22px rgba(255,255,255,.05),0 12px 32px rgba(0,0,0,.6),0 2px 8px rgba(0,0,0,.4)}
.navBottom button,.navBottom a{position:relative;isolation:isolate;border:0;background:none;color:rgba(255,255,255,.62);font:800 10px/1 system-ui,-apple-system,sans-serif;display:flex;flex-direction:column;align-items:center;gap:4px;text-decoration:none;padding:7px 0 8px;border-radius:28px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color .2s}
.navBottom .ico{width:30px;height:30px;color:#f1e4e8;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5));transition:color .2s,filter .2s,transform .2s}
.navBottom button:active .ico,.navBottom a:active .ico{transform:scale(.92)}
.navBottom button.on,.navBottom a.on{color:#ff8996}
.navBottom button.on .ico,.navBottom a.on .ico{color:#ff4d63;filter:drop-shadow(0 0 7px rgba(255,77,99,.75)) drop-shadow(0 2px 3px rgba(0,0,0,.5))}
.navBottom button.on::before,.navBottom a.on::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:28px;
  background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.05) 55%,rgba(255,255,255,.1)),rgba(239,35,60,.22);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -6px 12px rgba(255,255,255,.05),0 4px 14px rgba(239,35,60,.25)}

/* ---------- Плавные переходы ----------
   Страница появляется, блоки поднимаются друг за другом; при уходе на другую страницу (transitions.js) она гаснет.
   Окна (sheet/modal) выезжают снизу на затемнении, которое тоже появляется плавно. Только opacity и transform у потомков .app,
   чтобы не ломать position:fixed внутри страниц. */
@keyframes tuffPageIn{from{opacity:0}to{opacity:1}}
@keyframes tuffRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes tuffFade{from{opacity:0}to{opacity:1}}
body{animation:tuffPageIn .3s ease both}
.app>*{animation:tuffRise .42s cubic-bezier(.2,.7,.2,1) both}
.app>*:nth-child(2){animation-delay:.04s}
.app>*:nth-child(3){animation-delay:.08s}
.app>*:nth-child(4){animation-delay:.12s}
.app>*:nth-child(5){animation-delay:.16s}
.app>*:nth-child(n+6){animation-delay:.2s}
body.leaving{opacity:0;transition:opacity .17s ease}
.sheetWrap.on,.profileModal.on,.stakeModal.on,.payModal.on,.wdModal.on{animation:tuffFade .22s ease}
.navBottom a,.navBottom button{transition:transform .15s ease,color .2s ease}
.navBottom a:active,.navBottom button:active{transform:scale(.94)}
@media (prefers-reduced-motion:reduce){body,.app>*,.sheetWrap.on,.profileModal.on,.stakeModal.on,.payModal.on,.wdModal.on{animation:none}body.leaving{transition:none}}