/* =========================================================
   Character cards (square pic • rectangle card • vote buttons)
   =========================================================*/
.character-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:1.25rem;
}

.ai-char-card{
  display:flex;
  align-items:center;
  gap:1rem;

  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:1rem 1.25rem;
  box-shadow:0 3px 8px rgba(0,0,0,.05);
  transition:transform .15s ease;
}
.ai-char-card:hover{transform:translateY(-3px);}

.ai-char-card .pic{
  flex:0 0 64px;
  height:64px;
  border-radius:8px;
  overflow:hidden;
}
.ai-char-card .pic img{
  width:100%;height:100%;object-fit:cover;
}

.ai-char-card .info{
  display:flex;
  flex-direction:column;
  flex:1;
}

.ai-char-card .name{
  font-size:.97rem;
  font-weight:600;
  color:#111827;
  margin:0 0 .35rem;
}

.ai-char-card .badge{
  align-self:flex-start;
  padding:.15rem .55rem;
  border-radius:6px;
  font-size:.70rem;
  font-weight:700;
  color:#fff;
  margin-bottom:.45rem;
}
.badge.main{background:#6d28d9;}
.badge.supporting{background:#6b7280;}

.ai-char-card .votes{
  display:flex;
  gap:.5rem;
}
.ai-char-card .vote-btn{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  font-size:.75rem;
  padding:.32rem .65rem;
  border:1px solid #d1d5db;
  border-radius:6px;
  background:#f9fafb;
  color:#374151;
  cursor:pointer;
  transition:background .15s;
}
.ai-char-card .vote-btn:hover{background:#e5e7eb;}
.ai-char-card .vote-btn.active{
  background:#3b82f6;border-color:#3b82f6;color:#fff;
}
.ai-char-card .cnt{font-weight:600}

.ai-char-card .vote-tag{
  display:inline-block;margin:0.25rem 0 0;
  padding:.15rem .45rem;font-size:.65rem;font-weight:600;
  border-radius:5px;color:#fff;
}
.ai-char-card.like  .vote-tag{background:#10b981;}  /* green Like  */
.ai-char-card.hate  .vote-tag{background:#ef4444;}  /* red Hate   */


/* Responsive tweak */
@media(max-width:560px){
  .character-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));}
}