/* 🔴 Увеличенная фотография игрока — ОДИН вид на оба фронта (правило владельца 10.09.2026:
   «клик по имени игрока всегда открывал его личный профиль.. клик на его фотке увеличивал его
   фотку»). Файл читают и серверные бандлы (`app._ZOOM_CSS`), и оболочка приложения: копия
   строкой в питоне была бы третьей версией одного окна — ровно так разъезжались лист
   «избранные» и раздел уведомлений. */
.vdzoom {
  position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center;
  justify-content: center; padding: 24px; background: rgba(8, 20, 16, .82);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  animation: vdzoomin .14s ease-out;
}
.vdzoom[hidden] { display: none !important; }
@keyframes vdzoomin { from { opacity: 0 } to { opacity: 1 } }
/* Кадр не выходит за экран ни по одной стороне и не растягивается выше своего разрешения:
   портреты приезжают ~600px, и растянутый до 4К он выглядел бы мыльным. */
.vdzoom img {
  max-width: min(92vw, 620px); max-height: 82vh; width: auto; height: auto;
  border-radius: 16px; box-shadow: 0 24px 60px rgba(0, 0, 0, .55); background: #0e1714;
  display: block;
}
.vdzoom .vdzcap {
  /* 🔴 Отступ снизу — с запасом на прибитую полосу меню (56-62px + безопасное поле): подпись,
     лежащая ровно на ней, читается как часть меню (поймано приёмкой 10.09.2026). */
  position: absolute; left: 0; right: 0; bottom: calc(76px + env(safe-area-inset-bottom));
  text-align: center; color: #fff; font-size: 14px; font-weight: 800;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .6); padding: 0 20px;
}
/* 🔴 Крестик — цель тапа 44px, а не 20-пиксельный глиф: закрывать окно приходится пальцем,
   и промах по нему читается как «оно не закрывается». Клик по фону закрывает тоже. */
.vdzoom .vdzx {
  position: absolute; top: max(12px, env(safe-area-inset-top)); right: 12px;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(255, 255, 255, .16); color: #fff; font-size: 20px; line-height: 1;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.vdzoom .vdzx:hover { background: rgba(255, 255, 255, .28) }
/* Сама фотография в строке: курсор говорит, что по ней есть действие. */
img[data-zoom] { cursor: zoom-in }