/* =========================================================
   MIS PARTIDOS · TIMELINE MINI CARDS
   ========================================================= */

.mp-tl-wrap{
  position: relative;
  overflow: visible;
}

.mp-tl-card{
  position: relative;
  min-width: 92px;
  max-width: 106px;
  height: 62px;
  padding: 4px 8px 3px 8px;
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
  overflow: visible;
  box-shadow:
    0 4px 12px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.03);
  transition:
    transform .16s ease,
    box-shadow .16s ease,
    border-color .16s ease,
    background .16s ease;
}

.mp-tl-card:hover{
  transform: translateY(-1px) scale(1.02);
}

.mp-tl-card.is-match{
  background:
    linear-gradient(180deg, rgba(22,28,32,.96), rgba(14,18,22,.98));
}

.mp-tl-card.is-event{
  background:
    linear-gradient(180deg, rgba(19,25,31,.96), rgba(12,16,20,.98));
}

.mp-tl-card.is-confirmed{
  border: 2px solid #39FF14;
  box-shadow:
    0 0 8px rgba(57,255,20,.22),
    0 4px 12px rgba(0,0,0,.28);
}

.mp-tl-card.is-pending{
  border: 2px solid #FFA500;
  box-shadow:
    0 0 8px rgba(255,165,0,.18),
    0 4px 12px rgba(0,0,0,.28);
}

.mp-tl-card-inner{
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.mp-tl-card.is-event .mp-tl-card-inner{
  padding-top: 2px;
}

/* =========================
   SHIELDS / EVENT
   ========================= */

.mp-tl-shields-row{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.mp-tl-shield{
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  background: #333;
  border: 1.8px solid #E9FFF7;
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
}

.mp-tl-shield.is-new-positive{
  border-color: #39FF14;
  box-shadow: 0 0 6px #39FF14, 0 0 12px rgba(57,255,20,.40);
}

.mp-tl-shield.is-new-negative{
  border-color: #FF2B2B;
  box-shadow: 0 0 6px #FF2B2B, 0 0 12px rgba(255,43,43,.34);
}

.mp-tl-event-icon-wrap{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  margin-bottom: 2px;
}

.mp-tl-event-icon{
  width: 30px;
  height: 30px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/* =========================
   EDAD / LIGA
   ========================= */

.mp-tl-age-league-wrap{
  position: relative;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 2px;
  transform: translateX(-4px);
}

.mp-tl-card.is-event .mp-tl-age-league-wrap{
  transform: translateX(0);
  margin-top: -1px;
  margin-bottom: 1px;
}

.mp-tl-age-icon{
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  position: relative;
  top: 2px;
  right: -10px;
  z-index: 1;
}

.mp-tl-league-icon{
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  position: relative;
  top: 7px;
  right: -1px;
  z-index: 2;
}

/* =========================
   HORA
   ========================= */

.mp-tl-time{
  margin-top: 2px;
  text-align: center;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  color: #e8fff3;
  text-shadow: 0 1px 0 rgba(0,0,0,.30);
}

.mp-tl-card.is-event .mp-tl-time{
  margin-top: 1px;
  margin-bottom: 0;
}

/* =========================
   BADGE OPCIÓN
   ========================= */

.mp-tl-option-badge{
  position: absolute;
  right: -14px;
  bottom: -6px;
  z-index: 8;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-weight: 900;
  line-height: 1;
  box-shadow:
    0 2px 8px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.mp-tl-option-text{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  user-select: none;
}

.mp-tl-option-badge.is-option-a{
  background: radial-gradient(circle at 30% 30%, rgba(120,255,190,.95), rgba(28,180,95,.96));
  border: 2px solid rgba(195,255,220,.95);
  color: #04160c;
  box-shadow:
    0 0 8px rgba(57,255,20,.55),
    0 0 16px rgba(57,255,20,.28),
    0 2px 8px rgba(0,0,0,.38);
}

.mp-tl-option-badge.is-option-b{
  background: radial-gradient(circle at 30% 30%, rgba(255,233,120,.98), rgba(255,181,32,.96));
  border: 2px solid rgba(255,245,190,.95);
  color: #1d1404;
  box-shadow:
    0 0 8px rgba(255,193,7,.48),
    0 0 16px rgba(255,193,7,.24),
    0 2px 8px rgba(0,0,0,.38);
}

.mp-tl-option-badge.is-option-coor{
  background: radial-gradient(circle at 30% 30%, rgba(222,140,255,.98), rgba(145,58,255,.96));
  border: 2px solid rgba(238,205,255,.95);
  color: transparent;
  box-shadow:
    0 0 8px rgba(181,74,255,.62),
    0 0 16px rgba(181,74,255,.30),
    0 2px 8px rgba(0,0,0,.38);
}

.mp-tl-option-badge.is-option-unknown{
  background: radial-gradient(circle at 30% 30%, rgba(180,188,196,.98), rgba(108,116,124,.96));
  border: 2px solid rgba(228,232,236,.88);
  color: #101316;
  box-shadow:
    0 0 6px rgba(185,197,205,.20),
    0 2px 8px rgba(0,0,0,.38);
}

/* =========================
   BADGE KMS
   ========================= */

.mp-tl-kms-badge{
  position: absolute;
  left: -14px;
  bottom: -6px;
  z-index: 8;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  background: radial-gradient(circle at 30% 30%, rgba(120,255,190,.95), rgba(28,180,95,.96));
  border: 2px solid rgba(195,255,220,.95);
  color: #04160c;
  box-shadow:
    0 0 8px rgba(57,255,20,.55),
    0 0 16px rgba(57,255,20,.28),
    0 2px 8px rgba(0,0,0,.38);
}

.mp-tl-kms-text{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.02em;
  user-select: none;
}

/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 860px){
  .mp-tl-option-badge{
    right: -11px;
    bottom: -5px;
    width: 22px;
    height: 22px;
  }

  .mp-tl-option-text{
    font-size: 10px;
  }

  .mp-tl-kms-badge{
    left: -11px;
    bottom: -5px;
    width: 22px;
    height: 22px;
  }

  .mp-tl-kms-text{
    font-size: 6px;
  }

  .mp-tl-event-icon{
    width: 28px;
    height: 28px;
  }
}