/* ==========================================================================
   match-form-strip.css — forma W/D/L (wspólne dla wszystkich typów kart)
   Wymaga: variables.css
   ========================================================================== */

.match-form-strip {
  --form-diamond: 14px;
  --form-radius: 3px;
  --form-ring-gap: 2px;
  --form-ring-width: 1px;
  --form-ring-size: calc(
    var(--form-diamond) + 2 * (var(--form-ring-gap) + var(--form-ring-width))
  );
  --form-slot: 20px;
  --form-gap: 4px;
  /* Odsunięcie elementu z obramowaniem od sąsiada */
  --form-latest-offset: 2px;

  display: inline-flex;
  align-items: center;
  gap: var(--form-gap);
  min-height: var(--form-slot);
  overflow: visible;
}

.match-form-strip__item {
  position: relative;
  display: block;
  flex: 0 0 var(--form-slot);
  width: var(--form-slot);
  height: var(--form-slot);
  overflow: visible;
}

.match-form-strip__shape {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--form-diamond);
  height: var(--form-diamond);
  border-radius: var(--form-radius);
  transform: translate(-50%, -50%) rotate(45deg);
}

.match-form-strip__item--win .match-form-strip__shape {
  background: #6cd896;
}

.match-form-strip__item--draw .match-form-strip__shape {
  background: #eec170;
}

.match-form-strip__item--loss .match-form-strip__shape {
  background: #f1757f;
}

.match-form-strip__item--unknown .match-form-strip__shape {
  background: var(--muted-2);
}

/* Ostatni wynik — ten sam romb, wyśrodkowany w obramówce */
.match-form-strip__item--latest {
  margin-left: max(0px, var(--form-latest-offset));
}

.match-form-strip__item--latest::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  box-sizing: border-box;
  width: var(--form-ring-size);
  height: var(--form-ring-size);
  border: var(--form-ring-width) solid transparent;
  border-radius: calc(var(--form-radius) + var(--form-ring-gap));
  background: transparent;
  transform: translate(-50%, -50%) rotate(45deg);
  pointer-events: none;
}

.match-form-strip__item--latest.match-form-strip__item--win::before {
  border-color: #6cd896;
}

.match-form-strip__item--latest.match-form-strip__item--draw::before {
  border-color: #eec170;
}

.match-form-strip__item--latest.match-form-strip__item--loss::before {
  border-color: #f1757f;
}

.match-form-strip__item--latest.match-form-strip__item--unknown::before {
  border-color: var(--muted-2);
}

.match-form-strip__empty {
  font-size: var(--fs-12);
  color: var(--muted);
}