/* --- GRID: 290 x 470 --- */
.section-grid{
  display: grid;
  /* min(50%, 220px) гарантирует хотя бы две колонки даже на узком экране */
  grid-template-columns: repeat(auto-fit, minmax(min(50%, 220px), 1fr));
  gap: 12px;
  grid-auto-flow: dense;
}

/* Гарантируем минимум 2 столбца на узких экранах */
@media (max-width: 640px){
  .section-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* всегда ≥2 колонки */
  }

  /* Приводим спаны к вменяемым значениям на мобилках */
  .section-grid .col-span-4,
  .section-grid .col-span-3{
    grid-column: span 2 / span 2;   /* широкие плитки занимают всю строку (2 колонки) */
  }
  .section-grid .col-span-2,
  .section-grid .col-span-1{
    grid-column: span 1 / span 1;   /* обычные — по одной колонке */
  }
}

/* На очень-очень узких экранах избавляемся от переполнений */
.tile, .tile * {
  min-width: 0;
}


.tile {
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  border-radius: 14px;
  overflow: hidden;
}

/* медиа-контейнер */
.tile-media {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 14px;
}

/* базовое поведение картинок */
.tile-media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}

/* JAM TRACK */
.tile--jam .tile-media {
  aspect-ratio: 1/1;
  height: auto;
}
.tile--jam .tile-media > img {
  object-fit: cover;
}

/* Music (НЕ Jam Tracks, обычные секции) */
.tile--music {
  display: flex;
  flex-direction: column;
  padding: 8px;
}

.tile--music .tile-media {
  width: 100%;
  aspect-ratio: 1 / 1;   /* квадрат */
  height: auto !important;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 10px;
}

.tile--music .tile-media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ==== BUNDLES ==== */

/* 1x1 маленький бандл */
.tile--bundle.Size_1_x_1 .tile-media > img {
  object-fit: contain;
  transform: scale(1.5) translateY(22%);
  transform-origin: center;
}

/* 2x1 горизонтальный бандл */
.tile--bundle.Size_2_x_1 .tile-media > img {
  object-fit: contain;
  transform: scale(1) translateY(0%);
  transform-origin: center;
}

/* 3x1 широкий бандл */
.tile--bundle.Size_3_x_1 .tile-media > img {
  object-fit: contain;
  transform: scale(1.0) translateY(9%);
  transform-origin: center;
}

/* 4x1 очень широкий (обычно спец-наборы) */
.tile--bundle.Size_4_x_1 .tile-media > img {
  object-fit: contain;
  transform: scale(2.3) translateY(22%);
  transform-origin: center;
}

/* --- НОВЫЕ ТИПЫ --- */

/* Outfit */
.tile--outfit .tile-media > img {
  object-fit: cover;
  object-position: center bottom; /* базовое позиционирование */
  transform: scale(1.3) translateY(15%); /* увеличиваем + сдвигаем вниз */
}

/* Emote */
.tile--emote .tile-media > img {
  object-fit: contain;
  transform: scale(1.1) translateY(10%);
}

/* Backpack */
.tile--backpack .tile-media > img {
  object-fit: contain;
  transform: scale(1.2) translateY(15%);      /* увеличиваем на 20% */
  transform-origin: center;   /* центр остаётся на месте */
}

/* Drifttrail */
.tile--drifttrail .tile-media > img {
  object-fit: contain;
  transform: scale(1.3) translateY(15%);
}

/* Wheel */
.tile--wheel .tile-media > img {
  object-fit: contain;
  transform: scale(1.2) translateY(10%);
  padding: 6px;
}

/* Booster */
.tile--booster .tile-media > img {
  object-fit: contain;
  transform: scale(1.2) translateY(10%);
  padding: 6px;
}

/* Lego set */
.tile--legoset .tile-media > img {
  object-fit: contain;
  transform: scale(0.95);
}

/* Mic */
.tile--mic .tile-media > img {
  object-fit: contain;
  transform: scale(0.8);
}

/* Drum */
.tile--drum .tile-media > img {
  object-fit: contain;
  transform: scale(0.85);
}

/* Guitar */
.tile--guitar .tile-media > img {
  object-fit: contain;
  transform: scale(0.85);
}

/* Pickaxe */
.tile--pickaxe .tile-media > img {
  object-fit: contain;
  transform: scale(1.2) translateY(15%);
}

/* Glider */
.tile--glider .tile-media > img {
  object-fit: contain;
  transform: scale(0.9);
}

/* Wrap */
.tile--wrap .tile-media > img {
  object-fit: contain;
  transform: scale(1.2) translateY(10%);
  padding: 8px;
}




.tile--glider .tile-media > img {
  object-fit: contain;
  transform: scale(1.2) translateY(15%);
}

/* подписи поверх картинки */
.tile-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 12px;
  background: linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.65) 100%);
  color: #fff;
  z-index: 2;
  pointer-events: none;
}

/* размеры иконки V-Bucks */
.vb { width: 24px; height: 24px; }
.vb-sm { width: 24px; height: 24px; }

/* мелкие утилиты */
.title {
  font-weight: 800;
  color: #fff;
}
.artist {
  font-size: 17px;
  color: rgba(255, 255, 255, 0.9);
}
.title, .font-semibold {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Быстрое появление */
.tile-io.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-duration: .12s; /* было .22s → стало быстрее */
}

/* Короткое исчезновение при уходе за экран */
.tile-io.is-leaving {
  opacity: 0;
  transform: translateY(8px) scale(.98);
  transition-duration: .1s; /* было .18s → ускорили */
  transition-delay: 0ms;
}


#emote-modal.hidden { display: none !important; }
#emote-modal.show   { display: flex !important; }

/* Контейнер модалки — для крестика справа и корректной прокрутки */
#emote-modal > .relative { position: relative; }
#emote-modal .modal-content{
  max-height: 90vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}