.breadcrumbs{font-size: 12px; margin: 6px 0 14px}
.breadcrumbs a{color: var(--muted); text-decoration:none}
.breadcrumbs a:hover{color: var(--text)}
.breadcrumbs .sep{opacity:.5; margin: 0 6px}
.dot{opacity:.6; margin: 0 8px}

.review-hero{padding:18px}
.review-hero-grid{
  display:grid;
  grid-template-columns: 260px 1fr;
  gap: 16px;
  align-items:start;
}
@media (max-width: 820px){
  .review-hero-grid{grid-template-columns: 1fr}
}
.review-game-img{
  width:100%;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.2);
}
.review-sub{font-size: 13px}

.review-score-wrap{display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-top: 12px}
.score-badge{
  display:inline-flex; align-items:baseline; gap:6px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(74,163,255,.35);
  background: rgba(74,163,255,.14);
}
.score-badge .score{font-size: 20px; font-weight: 800}
.score-badge .outof{font-size: 12px; color: var(--muted)}
.review-verdict{margin:0; color: var(--text); opacity:.9; max-width: 65ch}

.h3{margin: 10px 0 8px; font-size: 14px; color: var(--text)}
.pc-list{margin: 0; padding-left: 18px; color: var(--muted)}
.pc-item{margin: 8px 0}
.pc-good{color: rgba(255,255,255,.86)}
.pc-bad{color: rgba(255,255,255,.80)}
.pc-good::marker{color: rgba(55,214,122,.95)}
.pc-bad::marker{color: rgba(255,92,122,.95)}

.card-review .card-media{position:relative}
.card-score{
  position:absolute;
  right:10px; top:10px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.12);
  font-size: 12px;
}