/* ============================================================
   media.css — сетка медиа (галерея персонажа, «Моё», «Мои фото и видео»), покупка галереи,
   просмотрщик — в media-viewer.css
   ============================================================ */

/* ---------- Сетка медиа ---------- */
/* Колонки по ширине контейнера: на телефоне 2, дальше — плитки ~200px (3–5 в ряд) */
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(200px, calc(50% - 5px)), 1fr));
  gap: 10px;
}
/* Плотная сетка («Мои фото и видео»): на телефоне 3 квадрата в ряд с зазором 4px, без подписей на плитках */
.media-grid--dense {
  grid-template-columns: repeat(auto-fill, minmax(min(150px, calc(33.333% - 3px)), 1fr));
  gap: 4px;
}
.media-grid--dense .media-tile { aspect-ratio: 1; border-radius: 8px; border: 0; }
.media-grid--dense .media-tile::after { height: 34%; }
.media-grid--dense .media-tile__dur { right: 5px; bottom: 5px; padding: 2px 7px 2px 5px; font-size: 11px; }
.media-grid--dense .media-tile__dur.is-bare { padding: 0; width: 22px; height: 22px; }
.media-grid--dense .media-tile__ph .icon { width: 26px; height: 26px; }
@media (hover: hover) and (pointer: fine) {
  .media-grid--dense .media-tile:hover { transform: none; }
}
.media-tile {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  aspect-ratio: 3 / 4;
  border-radius: 16px;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  text-align: left;
  background: var(--card-2);
  border: 1px solid var(--line);
  animation: rise-in 280ms var(--ease) both;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t);
}
/* Пока картинка грузится — мерцает как скелетон, размер уже задан */
.media-tile.is-loading {
  background: linear-gradient(90deg, var(--card) 25%, var(--card-2) 50%, var(--card) 75%);
  background-size: 200% 100%;
  animation: rise-in 280ms var(--ease) both, shimmer 1.4s linear infinite;
}
.media-tile--skeleton { border: 0; animation: shimmer 1.4s linear infinite; }
.media-tile:active { transform: scale(0.97); }
/* Затемнение снизу — под длительность и подпись */
.media-tile::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0; right: 0; bottom: 0;
  height: 42%;
  background: linear-gradient(180deg, rgba(8, 6, 16, 0), rgba(8, 6, 16, 0.62));
  pointer-events: none;
}
.media-tile__img,
.media-tile__blur {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media-tile__img { transition: transform 420ms var(--ease), opacity 240ms var(--ease); }
.media-tile.is-loading .media-tile__img { opacity: 0; }
/* Закрытый кадр: силуэт и цвета видны, детали — нет (как карточка в чате, .locked-media__blur) */
.media-tile__blur { filter: blur(8px) saturate(1.35) brightness(0.82); transform: scale(1.3); }
.media-tile.is-locked::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: radial-gradient(circle at 50% 48%, rgba(11, 10, 20, 0.05), rgba(11, 10, 20, 0.42));
}
.media-tile__ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.55);
  background: var(--grad-soft), var(--card-2);
}
.media-tile__ph .icon { width: 34px; height: 34px; }

/* Закрытое: только замок по центру (цена — одна на галерею, на кнопке «Открыть всё») */
.media-tile__lock {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.media-tile__lock-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  background: rgba(11, 10, 20, 0.34);
  border: 1px solid rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
.media-tile__lock-icon .icon { width: 20px; height: 20px; }

.media-tile__dur {
  position: absolute;
  z-index: 3;
  right: 8px;
  bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px 4px 7px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  background: rgba(11, 10, 20, 0.58);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-variant-numeric: tabular-nums;
}
.media-tile__dur .icon { width: 11px; height: 11px; }
/* Длина неизвестна — кружок с ▶ без текста */
.media-tile__dur.is-bare { padding: 0; width: 24px; height: 24px; justify-content: center; }
.media-tile__dur.is-bare .icon { margin-left: 1px; }
.media-tile__label {
  position: absolute;
  z-index: 3;
  left: 10px;
  right: 72px;
  bottom: 10px;
  font-size: 13px;
  font-weight: 800;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}
/* У фото бейджа длительности нет — подписи вся ширина */
.media-tile:not(.is-video) .media-tile__label { right: 10px; }
@media (hover: hover) and (pointer: fine) {
  .media-tile:hover { transform: translateY(-2px); border-color: var(--line-2); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45); }
  .media-tile:hover .media-tile__img { transform: scale(1.04); }
}

/* Проявление после покупки: картинка проступает из размытия, замок исчезает */
.media-tile__img.is-pending { opacity: 0; }
.media-tile__img.is-revealed { animation: tile-reveal 900ms var(--ease) var(--reveal-delay, 0ms) backwards; }
.media-tile__lock.is-opening { animation: tile-lock-out 760ms var(--ease) calc(var(--reveal-delay, 0ms) + 160ms) both; }
@keyframes tile-reveal {
  0% { opacity: 0; filter: blur(18px) saturate(1.3); transform: scale(1.12); }
  100% { opacity: 1; filter: none; transform: none; }
}
@keyframes tile-lock-out {
  0% { opacity: 1; transform: scale(1); }
  35% { opacity: 1; transform: scale(1.18); }
  100% { opacity: 0; transform: scale(0.6); }
}

/* «Открыть всё за ⚡» над сеткой */
.gal-unlock {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 66px;
  margin-bottom: 12px;
  padding: 10px 14px;
  border-radius: var(--r-lg);
  text-align: left;
  color: var(--text);
  background: linear-gradient(135deg, rgba(255, 45, 120, 0.22), rgba(139, 92, 246, 0.22)), var(--card);
  border: 1px solid rgba(255, 45, 120, 0.5);
  box-shadow: 0 10px 28px rgba(255, 45, 120, 0.16);
}
.gal-unlock:active { transform: scale(0.99); }
.gal-unlock__icon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  background: var(--grad);
  box-shadow: var(--glow);
}
.gal-unlock__icon .icon { width: 20px; height: 20px; }
.gal-unlock__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gal-unlock__body b { font-size: 16px; }
.gal-unlock__body span { font-size: 13px; color: var(--muted); }
.gal-unlock__chev { display: inline-flex; color: var(--muted); }
.gal-unlock__chev .icon { width: 18px; height: 18px; transform: rotate(180deg); }

/* ---------- Шторка покупки галереи ---------- */
/* Высота — по содержимому: с заданной минимальной высотой сверху оставалось ~200 px пустого размытого фона */
.unlock-sheet { isolation: isolate; overflow: hidden; background: #0d0b18; }
.unlock-sheet__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.unlock-sheet__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; filter: blur(22px) saturate(1.35); transform: scale(1.15); opacity: 0.8; }
.unlock-sheet__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13, 11, 24, 0.2) 0%, rgba(13, 11, 24, 0.6) 50%, rgba(13, 11, 24, 0.92) 78%, #0d0b18 100%);
}
.unlock-sheet .sheet__body { flex: 1; display: flex; }
.unlock-sheet__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 0 4px;
  text-align: center;
}
.unlock-sheet__line { width: 64px; height: 4px; border-radius: 4px; background: var(--grad); box-shadow: 0 0 14px rgba(255, 45, 120, 0.6); }
.unlock-sheet__who { max-width: 100%; font-size: 24px; font-weight: 900; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.unlock-sheet__lock { margin-top: 10px; color: var(--pink); display: inline-flex; }
.unlock-sheet__lock .icon { width: 42px; height: 42px; filter: drop-shadow(0 0 14px rgba(255, 45, 120, 0.65)); }
.unlock-sheet__title { font-size: 22px; font-weight: 900; letter-spacing: -0.01em; }
.unlock-sheet__text { max-width: 300px; font-size: 15px; line-height: 1.45; color: var(--muted); }
.unlock-offer {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 14px;
  padding: 16px 18px;
  border-radius: var(--r-lg);
  text-align: left;
  background: rgba(255, 45, 120, 0.1);
  border: 1px solid rgba(255, 45, 120, 0.55);
}
.unlock-offer__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.unlock-offer__body b { font-size: 16px; }
.unlock-offer__body span { font-size: 13px; line-height: 1.35; color: var(--muted); }
.unlock-offer__price { font-size: 22px; font-weight: 900; color: var(--amber); white-space: nowrap; }
.unlock-sheet__cta { margin-top: 14px; min-height: var(--btn-h-lg); padding: 0 28px; font-size: var(--fs-md); } /* = .btn--lg */
.unlock-sheet__balance { font-size: 13px; color: var(--muted); }
.unlock-sheet__balance.is-low { color: var(--amber); }