/* Discord profile card, shared by / and /v2 */

.dc-card {
  --accent: #b9771f;
  --accent-2: #3a210a;
  display: block;
  width: min(340px, 100%);
  padding: 4px;
  text-align: left;
  color: #f2e7cf;
  text-decoration: none;
  border-radius: 14px;
  background: linear-gradient(170deg, var(--accent), var(--accent-2));
  box-shadow: 0 30px 70px -25px rgba(200, 120, 30, 0.45);
  transition: opacity 0.7s ease, transform 0.45s var(--ease-out), box-shadow 0.45s;
}
.in-view .dc-card.reveal:hover { transform: translateY(-6px) rotate(-0.6deg); box-shadow: 0 40px 80px -25px rgba(220, 140, 40, 0.6); }

.dc-banner { aspect-ratio: 340 / 120; overflow: hidden; border-radius: 10px 10px 0 0; }
.dc-banner img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-out); }
.dc-card:hover .dc-banner img { transform: scale(1.06); }

.dc-body {
  position: relative;
  padding: 0 16px 16px;
  border-radius: 0 0 10px 10px;
  background: linear-gradient(180deg, rgba(40, 22, 6, 0.55), rgba(20, 12, 4, 0.82));
}

.dc-avatar { position: relative; width: 92px; height: 92px; margin-top: -46px; }
.dc-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 6px solid #2b1806;
  background: #2b1806;
}
.dc-status {
  position: absolute;
  right: 2px;
  bottom: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 5px solid #2b1806;
  background: #80848e;
}
.dc-status[data-status="online"] { background: #23a55a; }
.dc-status[data-status="idle"] { background: #f0b232; }
.dc-status[data-status="dnd"] { background: #f23f43; }

.dc-names { margin-top: 10px; }
.dc-names h3 { font-size: 1.25rem; font-weight: 700; color: #fff4dc; }
.dc-names p { margin-top: 2px; font-size: 0.85rem; color: #e0c9a2; }
.dc-note:not(:empty)::before { content: " • "; }

.dc-activity {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.28);
  font-size: 0.8rem;
}
.dc-activity[hidden] { display: none; }
.dc-activity img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.dc-activity small { display: block; font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: #d7b98b; }
.dc-activity b { display: block; color: #fff4dc; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-activity span { display: block; color: #e0c9a2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-activity > div { min-width: 0; }

.dc-button {
  display: block;
  margin-top: 16px;
  padding: 10px;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
  border-radius: 8px;
  background: #8c3d06;
  transition: background 0.3s;
}
.dc-card:hover .dc-button { background: #a8500f; }

/* decoration sits over the avatar ring, transparent in the middle */
.dc-avatar .dc-deco {
  position: absolute;
  top: -10%;
  left: -10%;
  width: 120%;
  height: 120%;
  border: 0;
  border-radius: 0;
  background: none;
  object-fit: contain;
  pointer-events: none;
  z-index: 1;
}
.dc-avatar .dc-status { z-index: 2; }
.dc-deco[hidden], .dc-tag[hidden] { display: none; }

.dc-badges {
  position: absolute;
  top: 12px;
  right: 16px;
  display: flex;
  gap: 2px;
  padding: 3px 5px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.3);
}
.dc-badges:empty { display: none; }
.dc-badges img { width: 20px; height: 20px; }

.dc-names h3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dc-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #f2e7cf;
  background: rgba(0, 0, 0, 0.3);
}
.dc-tag img { width: 14px; height: 14px; }