body { font-family: 'JetBrains Mono', monospace; }
.gothic-title { font-family: 'Cinzel', serif; }
.font-sans { font-family: 'Inter', system-ui, sans-serif; }
.post-title { font-family: 'Cinzel', serif; letter-spacing: -0.01em; }

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: #050508; }
::-webkit-scrollbar-thumb { background: #1a1a24; }
::-webkit-scrollbar-thumb:hover { background: #2a2a38; }

@keyframes blink { 0%, 100% { opacity: 0.2; } 50% { opacity: 1; } }
.animate-blink { animation: blink 1.5s infinite; }

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Avatar */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Inter', sans-serif; font-weight: 800; color: #fff;
  letter-spacing: 0; user-select: none; flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.08);
}

/* Profile card in header */
.profile-card {
  display: inline-flex; align-items: center; gap: 10px;
  background: #050508; border: 1px solid #27272a;
  padding: 4px 22px 4px 10px; min-height: 44px; cursor: pointer;
  transition: border-color .15s, background .15s;
  margin-left: 9px;
}
.profile-card:hover { border-color: #52525b; background: #0c0c12; }

/* Proof thumb — preserves aspect ratio (no cropping/distortion) */
.proof-thumb {
  overflow: hidden; cursor: zoom-in;
  border: 1px solid #18181b; background: #050508;
  transition: border-color .15s, transform .15s;
  max-width: 170px; min-height: 110px;
  display: flex; align-items: center; justify-content: center;
}
.proof-thumb:hover { border-color: #52525b; }
.proof-thumb img { max-width: 100%; max-height: 170px; width: auto; height: auto; object-fit: contain; display: block; }
.proof-thumb iframe, .proof-thumb video { width: 100%; aspect-ratio: 16/9; display: block; }

.comment-image {
  width: 220px; height: 160px; object-fit: cover; cursor: zoom-in;
  border: 1px solid #27272a; margin-top: 8px; display: block;
}

/* Rank badge under username */
.rank-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: 'Inter', sans-serif; font-weight: 700;
  font-size: 10px; letter-spacing: 0.05em; line-height: 1;
}
.rank-badge img { width: 16px; height: 16px; display: block; }

.tier-iron        { color: #6b6b6b; }
.tier-bronze      { color: #b97a3b; }
.tier-silver      { color: #b8c4cf; }
.tier-gold        { color: #e8c267; }
.tier-platinum    { color: #4ec5a8; }
.tier-emerald     { color: #2bd07a; }
.tier-diamond     { color: #6cb8f5; }
.tier-master      { color: #c878e8; }
.tier-grandmaster { color: #ef4444; }
.tier-challenger  { color: #f6d365; }

/* Rank chip hover — glow in the rank's own color */
.rank-chip { transition: box-shadow .2s, opacity .2s, border-color .2s; }
.rank-chip:hover { box-shadow: 0 0 14px -2px currentColor, inset 0 0 6px -2px currentColor; }



/* Vote click feedback */
@keyframes votePop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}
.vote-pop { animation: votePop .28s ease-out; }
@keyframes voteShake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  75% { transform: translateX(2px); }
}
.vote-cooldown { animation: voteShake .25s ease; opacity: .6; }