/*
 * Плашка «на главный экран» и запрос уведомлений.
 *
 * Отдельным файлом, а не в shell.css: тема большая, и правки в ней идут
 * параллельно — отдельный файл исключает конфликты и позволяет менять версию
 * только у него.
 *
 * Плашка висит над нижней навигацией: там её не перекрывают модалки, и она не
 * закрывает игровые кнопки.
 */
.pwa-card{
  position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom,0px));
  z-index:60; display:flex; align-items:center; gap:12px;
  padding:12px 14px; border-radius:14px;
  background:linear-gradient(180deg,#1e2329,#171b21);
  border:1px solid rgba(252,213,53,.28);
  box-shadow:0 18px 40px rgba(0,0,0,.55);
  color:#eaecef; font:500 13px/1.35 Montserrat,system-ui,sans-serif;
  animation:pwa-up .28s ease-out;
}
@keyframes pwa-up{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
.pwa-card .pwa-ic{width:44px; height:44px; border-radius:10px; flex:0 0 auto}
.pwa-card .pwa-txt{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 1 auto}
.pwa-card .pwa-txt b{font-weight:800; font-size:13.5px}
.pwa-card .pwa-txt span{color:#8b95a1; font-size:12px}
.pwa-card .pwa-yes{
  flex:0 0 auto; border:0; cursor:pointer; border-radius:10px;
  background:#fcd535; color:#0b0e11; font:800 13px/1 Montserrat,sans-serif;
  padding:11px 14px;
}
.pwa-card .pwa-yes:active{background:#f0b90b}
.pwa-card .pwa-no{
  flex:0 0 auto; border:0; background:transparent; color:#8b95a1;
  font-size:20px; line-height:1; cursor:pointer; padding:4px 2px;
}
@media (min-width:768px){
  /* На широком экране ставим в правый нижний угол: по центру снизу плашка
     перекрывает контент, который игрок читает. */
  .pwa-card{left:auto; right:20px; bottom:20px; width:360px}
}