/* ============================================================================
 * crest.css - tc-crest
 * ----------------------------------------------------------------------------
 * SCHICHT 0 (Atom). Rundes Wappen-/Portraet-Medaillon mit Monogramm. Dient als
 * Platzhalter-Qualitaet-die-gewollt-aussieht und ist bereit fuer echte Bilder.
 * Genutzt u.a. von tc-ranking (Podest + Zeilen).
 *
 * THEME-GETRIEBEN, ausser Medaillen-Randfarben (Gold/Silber/Bronze = DATEN,
 * hart - wie in leaderboard.css).
 *
 * Struktur:
 *   .tc-crest                     Block (Monogramm-Medaillon)
 *     .tc-crest__rank             kleine Rang-Plakette (unten mittig)
 *   Modifier: --gold / --silver / --bronze (Rand + Plakette) . --sm (klein)
 * ============================================================================ */

.tc-crest {
  position: relative;
  width: 56px; height: 56px;
  border-radius: 50%;
  display: grid; place-items: center;
  flex-shrink: 0;
  font-family: var(--tc-font-display, 'Cinzel', serif);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--tc-highlight);
  background: radial-gradient(circle at 32% 28%, #3b3228, #221b16 68%, #171210);
  border: 2px solid var(--tc-accent-dark);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.6);
}
.tc-crest--gold   { border-color: #FFD700; box-shadow: inset 0 2px 6px rgba(0,0,0,0.6), 0 0 15px rgba(255,215,0,0.35); }
.tc-crest--silver { border-color: #C0C0C0; }
.tc-crest--bronze { border-color: #CD7F32; }
.tc-crest--sm     { width: 38px; height: 38px; font-size: 0.98rem; border-width: 1px; }

.tc-crest__rank {
  position: absolute;
  bottom: -7px; left: 50%;
  transform: translateX(-50%);
  width: 23px; height: 23px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--tc-font-display, 'Cinzel', serif);
  font-weight: 700;
  font-size: 0.78rem;
  color: #1a1208;
  border: 2px solid #171210;
  box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.tc-crest__rank--gold   { background: linear-gradient(135deg, #FFD700, #B8860B); }
.tc-crest__rank--silver { background: linear-gradient(135deg, #C0C0C0, #808080); }
.tc-crest__rank--bronze { background: linear-gradient(135deg, #CD7F32, #8B4513); color: #fff; }

@media (max-width: 480px) {
  .tc-crest { width: 48px; height: 48px; font-size: 1.15rem; }
}