/* ── Blog list ──────────────────────────────────────────────────── */
.blog-card {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 1.25rem;
  transition: border-color .15s, background .15s;
  cursor: pointer;
  text-decoration: none;
  display: block;
  color: inherit;
}
.blog-card:hover {
  border-color: rgba(99,102,241,.4);
  background: rgba(99,102,241,.06);
  color: inherit;
  text-decoration: none;
}
.blog-card-game {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: .15rem .55rem;
  border-radius: 999px;
  background: rgba(99,102,241,.15);
  border: 1px solid rgba(99,102,241,.3);
  color: #a5b4fc;
}
.blog-card-title {
  font-weight: 700;
  font-size: 1.05rem;
  color: #fff;
  margin: .5rem 0 .35rem;
  line-height: 1.3;
}
.blog-card-summary {
  font-size: .85rem;
  color: rgba(255,255,255,.5);
  line-height: 1.6;
  margin-bottom: .75rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-card-meta {
  font-size: .75rem;
  color: rgba(255,255,255,.3);
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}

/* ── Stars ──────────────────────────────────────────────────────── */
.stars {
  display: inline-flex;
  gap: 2px;
}
.star {
  font-size: 1rem;
  color: rgba(255,255,255,.15);
  cursor: pointer;
  transition: color .1s, transform .1s;
  line-height: 1;
}
.star.filled, .star.hover { color: #fbbf24; }
.star:hover { transform: scale(1.2); }

/* ── Filtros ────────────────────────────────────────────────────── */
.blog-filter-btn {
  padding: .3rem .85rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: transparent;
  color: rgba(255,255,255,.5);
  font-size: .8rem;
  cursor: pointer;
  transition: all .15s;
}
.blog-filter-btn:hover,
.blog-filter-btn.active {
  background: rgba(99,102,241,.18);
  border-color: rgba(99,102,241,.4);
  color: #a5b4fc;
}

/* ── Pagination ─────────────────────────────────────────────────── */
.blog-pag {
  display: flex;
  gap: .4rem;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.blog-pag-btn {
  min-width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.1);
  background: transparent;
  color: rgba(255,255,255,.5);
  font-size: .85rem;
  cursor: pointer;
  transition: all .15s;
  padding: 0 .6rem;
}
.blog-pag-btn:hover { background: rgba(255,255,255,.07); color: #fff; }
.blog-pag-btn.active {
  background: rgba(99,102,241,.25);
  border-color: rgba(99,102,241,.5);
  color: #fff;
  font-weight: 700;
}
.blog-pag-btn:disabled { opacity: .3; cursor: not-allowed; }

/* ── Post view ──────────────────────────────────────────────────── */
.post-content {
  color: rgba(255,255,255,.8);
  font-size: .95rem;
  line-height: 1.85;
}
.post-content h2, .post-content h3 { color: #fff; margin-top: 1.75rem; margin-bottom: .75rem; }
.post-content p  { margin-bottom: 1rem; }
.post-content ul, .post-content ol { padding-left: 1.4rem; margin-bottom: 1rem; }
.post-content li { margin-bottom: .35rem; }
.post-content blockquote {
  border-left: 3px solid rgba(99,102,241,.5);
  padding-left: 1rem;
  color: rgba(255,255,255,.5);
  font-style: italic;
  margin: 1rem 0;
}
.post-content code {
  background: rgba(255,255,255,.07);
  padding: .15rem .4rem;
  border-radius: 4px;
  font-size: .88em;
}
.post-content pre code { display: block; padding: 1rem; overflow-x: auto; }

/* ── Comentarios ────────────────────────────────────────────────── */
.comment-card {
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
  padding: .85rem 1rem;
  margin-bottom: .6rem;
}
.comment-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(99,102,241,.2);
  flex-shrink: 0;
}