/* Стили фактов об игре (game-facts.js): плашка Metacritic и блок «Время прохождения».
   Один файл на магазин и сайт (§0cc) — оба фронта тёмные, поэтому цвета заданы
   полупрозрачными поверх фона, а не под конкретную тему. */

/* Плашка оценки критиков — рядом со звездой PS Store. Квадрат с цифрой — узнаваемый
   вид Metacritic; цвет по его шкале (зелёный / жёлтый / красный). */
.gf-score{display:inline-flex;align-items:center;gap:7px;margin-top:6px;
  font-size:11px;font-weight:800;line-height:1;color:rgba(237,243,255,.55);
  text-transform:none;white-space:nowrap}
.gf-score b{display:inline-flex;align-items:center;justify-content:center;
  min-width:26px;height:26px;padding:0 5px;border-radius:6px;
  font-size:14px;font-weight:900;color:#0f1118;letter-spacing:-.2px}
.gf-score.is-good b{background:#00ce7a}
.gf-score.is-mixed b{background:#ffbd3f}
.gf-score.is-bad b{background:#ff6874}

/* Оценки в одну строку: звезда PS Store и Metacritic — соседи, а не столбик.
   В магазине обе лежат в .game-detail-scores (заголовок карточки — сетка), на сайте —
   в .detail__meta. */
.game-detail-scores{display:flex;align-items:flex-end;flex-wrap:wrap;gap:6px 16px}
.game-detail-scores .gf-score{margin-top:6px}
.detail__meta .detail__rate+.gf-score{margin-left:12px;margin-top:0}

/* В магазине оценка PS Store — текстом («★ 4.5 в PS Store», без плашки), и Metacritic
   рядом должен быть таким же: цветной квадратик-значок вместо звезды, цифра тем же
   кеглем и весом, подпись того же размера. Тяжёлый залитый квадрат рядом с лёгким
   текстом читался как чужой элемент (владелец, 26.08). Цвет — по шкале Metacritic. */
.game-detail-scores .gf-score{gap:5px;align-items:flex-end;color:rgba(237,243,255,.5);
  font-size:11px;font-weight:700}
.game-detail-scores .gf-score b{min-width:0;height:auto;padding:0;border-radius:0;
  background:none;font-size:14px;line-height:1;color:#fffdf8}
.game-detail-scores .gf-score::before{content:"";width:10px;height:10px;border-radius:2px;
  margin-bottom:2px;background:#00ce7a}
.game-detail-scores .gf-score.is-mixed::before{background:#ffbd3f}
.game-detail-scores .gf-score.is-bad::before{background:#ff6874}

/* Блок «Время прохождения»: три ячейки с крупной цифрой и подписью, снизу — источник. */
.gf-hltb{margin-top:16px;padding:14px 16px 12px;border:1px solid rgba(255,255,255,.08);
  border-radius:18px;background:rgba(20,24,38,.82)}
.gf-hltb-head{font-size:13px;font-weight:800;color:rgba(237,243,255,.62);margin-bottom:10px}
/* Три ячейки в ряд и в колонке обложки сайта шириной 280px (по ~78px): подпись при
   нужде переносится на вторую строку, ряд не рвётся. */
.gf-hltb-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(70px,1fr));gap:8px}
.gf-hltb-cell{display:flex;flex-direction:column;gap:3px;padding:10px 4px;border-radius:12px;
  background:rgba(255,255,255,.05);text-align:center}
.gf-hltb-cell b{font-size:18px;font-weight:900;color:#fffdf8;letter-spacing:-.3px;line-height:1}
.gf-hltb-cell span{font-size:11px;font-weight:700;color:rgba(237,243,255,.5);line-height:1.2}
/* Шкала: длина — доля от самого долгого варианта (--gf-pct ставит game-facts.js).
   Градиент тот же, что у кнопки покупки, — один акцент на странице. */
.gf-hltb-bar{display:block;height:3px;margin-top:6px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden}
.gf-hltb-bar::before{content:"";display:block;height:100%;width:var(--gf-pct,0%);border-radius:2px;
  background:linear-gradient(90deg,#5ee7ff,#6b7cff)}
.gf-hltb-src{margin-top:8px;font-size:11px;color:rgba(237,243,255,.38)}

/* На сайте (компьютер) блок стоит рядом со свойствами товара, впритык к блоку покупки
   в рамке — чтобы два «ящика» не спорили за внимание с кнопкой, здесь он без рамки.
   Ячейки — СТОЛБИКОМ, строками «38 ч — Сюжет» (задумка владельца, 26.08): так блок
   узкий и стоит сразу за свойствами, а не тянется полосой к кнопке покупки. На телефоне
   блок идёт отдельной строкой под списком свойств: три ячейки в ряд, в рамке. */
@media (min-width: 681px){
  .detail__facts .gf-hltb{margin-top:0;padding:0;border:0;background:none}
  .detail__facts .gf-hltb-head{margin-bottom:8px}
  .detail__facts .gf-hltb-grid{grid-template-columns:1fr;gap:6px}
  /* Строка: подпись слева, часы справа, шкала под ними во всю ширину. */
  .detail__facts .gf-hltb-cell{display:grid;grid-template-columns:1fr auto;align-items:baseline;
    gap:0 14px;width:220px;padding:8px 12px 9px;text-align:left}
  .detail__facts .gf-hltb-cell span{order:1;font-size:12px}
  .detail__facts .gf-hltb-cell b{order:2;font-size:15px}
  .detail__facts .gf-hltb-bar{order:3;grid-column:1 / -1;margin-top:7px}
}