/* === ОСНОВА КАРТОЧКИ === */
.pc-card{
  width:100%;
  background:#ecf0f1;
  border-radius:12px;
  padding:14px;
}
.pc-card, .pc-card *{ box-sizing:border-box; }

/* Две колонки: одинаковая ширина + одинаковая высота */
.pc-main{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  align-items:stretch;
}
.pc-col{
  border-radius:12px;
  padding:14px;
  overflow:visible;
  height:100%;
  background:#fff;
}

/* =========================
   ЛЕВЫЙ БЛОК: ТЁМНЫЙ СТИЛЬ
========================= */
.pc-col.pc-left{
  background:#0f141a;
  border:1px solid rgba(255,255,255,.06);
  color:#e5e7eb;
}
.pc-left a{ color:inherit; }
.pc-left .pc-rating--top{ background:rgba(255,255,255,.06); }

.pc-left .desc-card__title{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  color:#fff;
}

/* =========================
   ПОСТЕР
========================= */
.pc-left{ display:flex; flex-direction:column; gap:12px; }

.pc-posterFrame{
  position:relative;
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  padding:10px;
  background:rgba(255,255,255,.03);
  overflow:hidden;
  margin-bottom:6px;
}
.pc-posterBg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  filter:blur(18px);
  transform:scale(1.15);
  opacity:.42;
  z-index:0;
}
.pc-posterFrame::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.78));
  z-index:1;
}
.pc-poster-link{
  position:relative;
  z-index:2;
  display:block;
  max-width:260px;
  margin:0 auto;
}
.pc-poster{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:3/4;
  object-fit:cover;
  object-position:center;
  border-radius:10px;
  border:0;
  transition:transform .25s ease, box-shadow .25s ease;
}
.pc-posterFrame:hover .pc-poster{
  transform:scale(1.02);
  box-shadow:0 12px 32px rgba(0,0,0,.55);
}

/* =========================
   КНОПКИ
========================= */
.pc-actions{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.pc-media-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  align-items:stretch;
}
.pc-media-btn{
  min-height:44px;
  border:0;
  border-radius:10px;
  cursor:pointer;
  font-weight:800;
  padding:0 14px;
  flex:0 1 180px;
  max-width:240px;
}
.pc-trailer{ background:#f3f5f7; color:#111827; }
.pc-trailer--yt{ background:#ffecec; }
.pc-trailer--vk{ background:#ecf4ff; }
.pc-trailer--rt{ background:#f2ecff; }
.pc-gallery-btn{ background:#fff5e6; color:#c45f00; }
.pc-gallery-btn:hover{ background:#ffeed1; }

.pc-download,
.pc-comment{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  width:100%;
  border-radius:10px;
  text-decoration:none;
}
.pc-download{ background:#2dc26b; color:#fff; }
.pc-comment{ background:#1f2937; color:#fff; }
.pc-comment:hover{ background:#111827; }

/* =========================
   ПРАВЫЙ БЛОК: АКЦЕНТ
========================= */
.pc-right{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.pc-right--accent{
  background:linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  border:1px solid rgba(13,71,161,.18);
  box-shadow:0 18px 48px rgba(17, 24, 39, .12);
}

/* =========================
   СПИСОК ИНФЫ (правый блок)
========================= */
.pc-infoList{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
}

/* ВАЖНО: grid вместо flex => значения не "скачут" */
.pc-infoList > li{
  display:grid;
  grid-template-columns:18px max-content minmax(0, 1fr);
  column-gap:10px;
  align-items:start;

  padding:7px 0;
  border-bottom:1px solid rgba(0,0,0,.08);
  overflow-wrap:anywhere;
  word-break:break-word;
}
.pc-infoList > li:last-child{ border-bottom:0; }

/* Иконки: поддержка и <i>, и <svg> (у тебя на странице svg) */
.pc-infoList i,
.pc-infoList svg{
  width:18px;
  height:18px;
  margin-top:2px;
  color:#6b7280;
}

/* Названия полей жирные */
.pc-infoList b{
  margin:0;
  color:#374151;
  font-weight:900;
  white-space:nowrap;
}

/* Значения: тонкие (и ссылки тоже) */
.pc-value{
  display:block;          /* в grid это стабильнее, чем inline */
  min-width:0;
  font-weight:400;
  color:#111827;
  line-height:1.35;
}
.pc-value a{
  font-weight:400;        /* чтобы ссылка не выглядела "жирнее значения" */
  color:inherit;
  text-decoration:none;
}
.pc-value a:hover{ text-decoration:underline; }

/* Пилюли */
.info-version,
.info-size{
  display:inline-flex;
  align-items:center;
  padding:3px 10px;
  border-radius:999px;
  background:#ecf4ff;
  border:1px solid rgba(13,71,161,.18);
  color:#0d47a1;
  font-weight:900;
}

/* =========================
   БЛОКИ "как Залито на"
========================= */
.pc-uploadWrap{
  padding:10px 12px;
  border-radius:12px;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
}
.pc-uploadRow{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
  color:#374151;
}
.pc-uploadRow i{
  width:18px;
  color:#6b7280;
  flex:0 0 18px;
}

.upload-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px 10px;
  justify-content:flex-start;
}
.upload-tags--left{ justify-content:flex-start; }

/* “Залито на” в левом блоке — по центру */
.pc-uploadWrap--left .pc-uploadRow{ justify-content:center; text-align:center; }
.pc-uploadWrap--left .upload-tags{ justify-content:center; }

/* Правые блоки (категории/метки) — слева */
.pc-uploadWrap--right .pc-uploadRow{ justify-content:flex-start; text-align:left; }
.pc-uploadWrap--right .upload-tags{ justify-content:flex-start; }

/* Левый блок: тёмная обёртка источников */
.pc-left .pc-uploadWrap{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}
.pc-left .pc-uploadRow{ color:#e5e7eb; }
.pc-left .pc-uploadRow i{ color:rgba(255,255,255,.65); }

/* Чип */
.upload-tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:5px 10px;
  border-radius:10px;
  font-size:13px;
  font-weight:900;
  border:1px solid rgba(0,0,0,.08);
  background:#f6f8fa;
  color:#111827;
  transition:transform .2s ease, background .2s ease;
  text-decoration:none;
}
.upload-tag:hover{
  transform:translateY(-2px);
  background:#eef2f7;
}

/* Раскраска (светлая тема) */
.upload-tag:nth-child(4n+1){ background:#ffecec; border-color:#ffb3b3; color:#c62828; }
.upload-tag:nth-child(4n+2){ background:#ecf4ff; border-color:#b3d1ff; color:#0d47a1; }
.upload-tag:nth-child(4n+3){ background:#e8ffef; border-color:#b2ffcc; color:#1b5e20; }
.upload-tag:nth-child(4n+0){ background:#f9ecff; border-color:#dab3ff; color:#6a1b9a; }

/* Приглушаем “конфеты” в тёмном левом блоке */
.pc-left .upload-tag{
  border-color:rgba(255,255,255,.10);
  box-shadow:0 0 0 1px rgba(0,0,0,.20) inset;
}
.pc-left .upload-tag:nth-child(4n+1){ background:rgba(198,40,40,.18); color:#ffd6d6; }
.pc-left .upload-tag:nth-child(4n+2){ background:rgba(13,71,161,.18); color:#dbeafe; }
.pc-left .upload-tag:nth-child(4n+3){ background:rgba(27,94,32,.18); color:#d1fae5; }
.pc-left .upload-tag:nth-child(4n+0){ background:rgba(106,27,154,.18); color:#f5d0fe; }

/* ====== ГАЛЕРЕЯ-ИСТОЧНИК (скрыта) ====== */
.pc-gallery-source{ display:none; }

/* ====== МОДАЛКИ ====== */
.pc-modal{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.72);
  z-index:999999;
  padding:18px;
}
.pc-modal.is-open{
  display:flex !important;
  align-items:center;
  justify-content:center;
}
.pc-modal__box{
  width:min(980px,100%);
  background:#0b0b0b;
  border-radius:14px;
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 24px 80px rgba(0,0,0,.45);
}
.pc-modal__close{
  position:absolute;
  top:10px;
  right:10px;
  width:44px;
  height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:12px;
  cursor:pointer;
  background:rgba(255,255,255,.12);
  color:#fff;
  font-size:28px;
  line-height:1;
  z-index:5;
}
.pc-modal__close:hover{ background:rgba(255,255,255,.18); }

/* Видео */
.pc-modal__box--video{ width:min(980px,100%); }
.pc-modal__video{ aspect-ratio:16/9; background:#000; }
.pc-modal__video iframe{ width:100%; height:100%; border:0; display:block; }

/* Галерея */
.pc-modal__box--gallery{ width:min(1100px,100%); }
.pc-galleryModal{
  display:grid;
  grid-template-columns:56px 1fr 56px;
  gap:12px;
  align-items:center;
  padding:64px 14px 12px;
}
.pc-galleryMain{
  background:#000;
  border-radius:12px;
  overflow:hidden;
  aspect-ratio:16/9;
  display:flex;
  align-items:center;
  justify-content:center;
}
.pc-galleryMain img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.pc-gNav{
  width:56px;
  height:56px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:14px;
  cursor:pointer;
  background:rgba(255,255,255,.12);
  color:#fff;
  font-size:34px;
  line-height:1;
}
.pc-gNav:hover{ background:rgba(255,255,255,.18); }
.pc-galleryThumbs{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:10px;
  padding:0 14px 16px 14px;
}
.pc-galleryThumbs button{
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer;
  border-radius:10px;
  overflow:hidden;
  width:112px;
  height:66px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 0 0 2px rgba(255,255,255,.10) inset;
}
.pc-galleryThumbs button.is-active{
  box-shadow:0 0 0 2px rgba(255,255,255,.55) inset;
}
.pc-galleryThumbs img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* ----- АДАПТИВ ----- */
@media (max-width:900px){
  .pc-main{ grid-template-columns:1fr; }
  .pc-poster-link{ max-width:320px; }
  .pc-media-btn{ flex:1 1 160px; max-width:none; }
}
@media (max-width:520px){
  .pc-media-btn{ flex:1 1 100%; max-width:none; }
  .pc-galleryModal{
    grid-template-columns:46px 1fr 46px;
    padding:64px 10px 10px;
    gap:10px;
  }
  .pc-gNav{
    width:46px;
    height:46px;
    border-radius:12px;
    font-size:30px;
  }
  .pc-galleryThumbs button{ width:92px; height:56px; }
}