/* ═══════════════════════════════════════════════════════════════════════
   Галерея — экспериментальные карты на разные темы (03.10.2026).
   Экран со списком карт (картинки) и слой во весь экран, где карта
   живёт в 3D: отдельная страница в рамке, см. «галерея» в js/app.js.
   ═══════════════════════════════════════════════════════════════════════ */

/* Заголовок экрана: подпись под названием, а не справа от него, как у
   обычного .sec — она длинная. */
.sec.galsec{flex-direction:column;align-items:flex-start;gap:4px}

.galereya{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px}
.gk{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:0;
  background:none;border:0;color:inherit;text-align:left;cursor:pointer}
.gk img{display:block;width:100%;margin-bottom:8px;
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.55))}
.gk b{font-size:15px;font-weight:700;letter-spacing:-.2px}
.gk span{font-size:12px;color:rgba(255,255,255,.55)}

/* Нижний ряд витрины — «Крафты» и «Галерея» пополам, той же высоты, что
   «Базовый» и «Редкий» (иначе надпись с кнопкой не помещались и текст
   стоял криво). Картинки здесь не торчат вверх, как у верхних плиток, —
   иначе залезают на «Легендарный» над ними: стоят внутри плитки, справа
   сверху. У «Галереи» вместо коробки — сама карта, чуть повёрнутая. */
.tile.t-mythic:not(.wide) .box{width:84px;top:12px;right:8px}
.tile .box.kartinka{width:58px;top:12px;right:18px;transform:rotate(8deg);
  filter:drop-shadow(0 10px 14px rgba(0,0,0,.55))}

/* Слой с живой картой. Выше профиля соперника (70), ниже уведомлений (90). */
.galsloy{position:fixed;inset:0;z-index:75;background:rgba(6,7,10,.94);
  opacity:0;transition:opacity .26s ease}
.galsloy.on{opacity:1}
.galsloy iframe{position:absolute;inset:0;width:100%;height:100%;border:0;
  background:transparent;opacity:0;transition:opacity .45s ease}
.galsloy.gotova iframe{opacity:1}

/* Заготовка на месте карты, пока та грузится, — того же вида, что скелет
   коллекции. Размер — по правилу страницы карты: 80 % высоты или 82 %
   ширины, что теснее; стоит по центру. Дышит сама заготовка (i), а гаснет
   обёртка: у одного узла анимация прозрачности перебила бы переход. */
.galske{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  height:min(80%, calc(82vw * 1177 / 800));aspect-ratio:800/1177;
  transition:opacity .45s ease}
.galske i{display:block;width:100%;height:100%;border-radius:8%/5.44%;
  background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
  animation:skePulse 1.1s ease-in-out infinite alternate}
.galsloy.gotova .galske{opacity:0}

/* 3D-комната (шаг 1, 05.10): заготовки нет — вход сам начинается с
   темноты, поэтому рамка видна сразу, а фон слоя — чёрный, без просвета. */
.galsloy.komnata{background:#000}
.galsloy.komnata iframe{opacity:1}

/* Своя кнопка «закрыть» — для браузера и старых клиентов. В Telegram
   закрывает его стрелка «назад» в шапке, а своя бы с ней спорила. */
.galzakryt{position:absolute;top:calc(max(10px, var(--safe-t)) + 4px);right:16px;
  width:36px;height:36px;display:grid;place-items:center;padding:0;border-radius:50%;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#fff}
.galzakryt svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round}
.tgback .galzakryt{display:none}