/* ============================================================
   КОМАНДА ЦЕНТРА v467: картинки значков (/badges/v1/<код>-<ступень>.webp).
   Полученный значок — цветная картинка ступени, не полученный — бронза
   серым с замком; нажатие раскрывает лесенку из трёх ступеней; «Новый!» —
   выросший с прошлого раза. Поверх team-v466; тот же блок — в maxapp-v43.css.
   ============================================================ */
button.tc-badge { width: 100%; margin: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; -webkit-appearance: none; appearance: none; }
.tc-badge { position: relative; grid-template-columns: 72px minmax(0, 1fr); align-items: center; transition: border-color .15s, box-shadow .15s, transform .15s; }
button.tc-badge:hover { border-color: var(--b-ic); box-shadow: 0 6px 18px rgba(20, 30, 50, .08); }
button.tc-badge:focus-visible { outline: 2px solid var(--tc-brand); outline-offset: 2px; }
.tc-badge.lvl-0 { opacity: 1; }
.tc-badge-art { position: relative; display: grid; place-items: center; width: 72px; height: 72px; }
.tc-badge-art > .tc-icon { width: 26px; height: 26px; color: var(--b-ic); }
.tc-badge-art > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(20, 30, 50, .18)); transition: transform .25s ease; }
button.tc-badge:hover .tc-badge-art > img { transform: scale(1.06) rotate(-3deg); }
.tc-badge.lvl-3 .tc-badge-art > img { filter: drop-shadow(0 0 10px rgba(227, 163, 32, .45)) drop-shadow(0 4px 8px rgba(20, 30, 50, .18)); }
.tc-badge.lvl-0 .tc-badge-art > img { filter: grayscale(1) opacity(.35); }
.tc-badge.lvl-0 .tc-badge-art::after {
  content: ''; position: absolute; right: 2px; bottom: 2px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--tc-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238592a6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / 12px no-repeat;
  box-shadow: 0 1px 4px rgba(20, 30, 50, .22);
}
.tc-badge-main { align-self: center; }

/* Лесенка из трёх ступеней; пока она раскрыта, соседние значки занимают место рядом. */
.tc-badges { grid-auto-flow: row dense; }
.tc-badge.is-open { grid-column: 1 / -1; border-color: var(--b-ic); }
.tc-ladder { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 6px; padding-top: 12px; border-top: 1px dashed var(--tc-line); }
.tc-rung { display: grid; justify-items: center; gap: 2px; text-align: center; min-width: 0; }
.tc-rung img { width: 104px; height: 104px; object-fit: contain; filter: grayscale(1) opacity(.32); transition: transform .25s ease; }
.tc-rung.is-got img { filter: drop-shadow(0 6px 12px rgba(20, 30, 50, .2)); }
.tc-rung.is-got:last-child img { filter: drop-shadow(0 0 12px rgba(227, 163, 32, .5)) drop-shadow(0 6px 12px rgba(20, 30, 50, .2)); }
.tc-rung b { font-size: 13.5px; }
.tc-rung small { color: var(--tc-muted); font-size: 12px; }
.tc-rung.is-got small { color: var(--tc-ok); font-weight: 700; }

/* «Новый!» */
.tc-new { position: absolute; top: -9px; right: 12px; padding: 2px 9px; border-radius: 999px; background: var(--tc-brand); color: #fff; font-size: 11px; font-style: normal; font-weight: 800; box-shadow: 0 3px 10px rgba(127, 20, 56, .3); animation: tc-pop .7s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes tc-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tc-new, .tc-badge-art > img, .tc-rung img { animation: none; transition: none; } }

/* Компактные — «Мои значки» */
.tc-badge.is-compact { grid-template-columns: 52px minmax(0, 1fr); gap: 8px; padding: 8px; cursor: default; }
.tc-badge.is-compact .tc-badge-art { width: 52px; height: 52px; }
.tc-badge.is-compact .tc-badge-art::after { width: 18px; height: 18px; background-size: 10px; }

/* Шапка профиля */
.tc-mini-badge { padding: 3px 10px 3px 4px; }
.tc-mini-badge img { width: 24px; height: 24px; margin: -4px 0; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(20, 30, 50, .25)); }

@media (max-width: 600px) {
  .tc-badge { grid-template-columns: 60px minmax(0, 1fr); }
  .tc-badge-art { width: 60px; height: 60px; }
  .tc-rung img { width: 76px; height: 76px; }
}