/* ======================================================
   INSÍGNIAS HISTÓRICAS — MOTOROCKINK
====================================================== */


/* ======================================================
   CONTAINER DAS INSÍGNIAS
====================================================== */

.insignias-canto {

  position: absolute;

  top: 12px;
  right: 12px;

  display: flex;
  flex-direction: column;
  align-items: center;

  z-index: 5;
}


/* ======================================================
   MOEDA BASE
====================================================== */

.insignia-moeda {

  width: 58px;
  height: 58px;

  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  position: relative;

  text-align: center;

  font-size: 12px;
  font-weight: 900;

  line-height: 1.05;
  letter-spacing: 1px;

  user-select: none;

  color: #2a1a00;

  background:

    radial-gradient(
      circle at 30% 30%,
      #f5dc8d,
      #ba8d2c 38%,
      #7a5515 68%,
      #3a2806 100%
    );

  border: 4px solid #2d1f04;

  box-shadow:

    inset 0 2px 2px rgba(255,255,255,0.18),

    inset 0 -4px 6px rgba(0,0,0,0.65),

    0 2px 10px rgba(0,0,0,0.45);
}


/* ======================================================
   DETALHE INTERNO
====================================================== */

.insignia-moeda::before {

  content: '';

  position: absolute;

  inset: 6px;

  border-radius: 50%;

  border: 2px dashed rgba(0,0,0,0.28);

  opacity: 0.8;
}

.insignia-moeda::after {

  content: '';

  position: absolute;

  inset: 0;

  border-radius: 50%;

  background:
    repeating-linear-gradient(
      -45deg,
      rgba(255,255,255,0.03) 0px,
      rgba(255,255,255,0.03) 1px,
      transparent 1px,
      transparent 4px
    );

  opacity: 0.35;

  pointer-events: none;
}


/* ======================================================
   MARCO 0
====================================================== */

.insignia-marco-zero {

  background:
    radial-gradient(
      circle at 30% 30%,
      #f3d57d,
      #bc902f 45%,
      #735014 75%,
      #3b2805
    );

  border-color: #2f2105;

  color: #2b1a00;
}


/* ======================================================
   DESBRAVADOR
====================================================== */

.insignia-desbravador {

  background:
    radial-gradient(
      circle at 30% 30%,
      #8fa8b5,
      #536977 45%,
      #2b3944 75%,
      #151d22
    );

  border-color: #0f161b;

  color: #0b1216;
}


/* ======================================================
   SUBTEXTO
====================================================== */

.insignia-subtexto {

  margin-top: 6px;

  text-align: center;

  font-size: 10px;

  color: rgba(255,255,255,0.55);

  letter-spacing: 0.5px;

  text-transform: none;

  white-space: normal;

  line-height: 1.2;
}


/* ======================================================
   INSIGNIA ITEM
====================================================== */

.insignia-item {

  display: flex;
  flex-direction: column;
  align-items: center;

  margin-bottom: 14px;
}


/* ======================================================
   CARD BASE
====================================================== */

.list-item-card {

  position: relative;
}


/* ======================================================
   MINI MARCO 0 — CARD
====================================================== */

.mini-marco-zero {

  position: absolute;

  top: 12px;
  right: 12px;

  width: 22px;
  height: 22px;

  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  z-index: 2;

  font-size: 8px;
  font-weight: 900;

  letter-spacing: 0.5px;

  color: #2b1a00;

  background:
    radial-gradient(
      circle at 30% 30%,
      #f3d57d,
      #bc902f 55%,
      #5c3d0b
    );

  border: 2px solid #2f2105;

  box-shadow:
    0 0 6px rgba(0,0,0,.45),
    inset 0 1px 1px rgba(255,255,255,.15);
}


/* ======================================================
   MINI DESBRAVADOR — CARD
====================================================== */

.mini-desbravador-inner {

  width: 22px;
  height: 22px;

  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 7px;
  font-weight: 900;

  letter-spacing: 0.5px;

  color: #0b1216;

  background:
    radial-gradient(
      circle at 30% 30%,
      #8fa8b5,
      #536977 55%,
      #2b3944
    );

  border: 2px solid #0f161b;

  box-shadow:
    0 0 6px rgba(0,0,0,.45),
    inset 0 1px 1px rgba(255,255,255,.12);
}

@media (max-width: 768px) {

  .insignia-moeda {

    width: 48px;
    height: 48px;

    font-size: 10px;
  }

  .insignia-subtexto {

    display: none;
  }

}