/* Le Joueur mystère: one player a day, found by the properties of the players named. The board, the
   chips (.chip--exact, .chip--wrong), the field and the buttons are shared (assets/styles.css, DESIGN.md). */

.mp-first {
  margin: 4px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
}

/* The guesses, oldest first: the last one sits just above the field. */
.mp-rows {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* One guess: its name, then its seven properties side by side, the franchise a little wider. */
.mp-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 7fr);
  align-items: stretch;
  gap: 8px;
}

.mp-name {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-family: 'Anton', Impact, sans-serif;
  font-size: 17px;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
}

.mp-name em {
  flex: none;
  font-family: 'Archivo', sans-serif;
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
}

.mp-row.is-found .mp-name {
  color: var(--green);
}

.mp-cells {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(6, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mp-cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 56px;
  padding: 4px;
  text-align: center;
  hyphens: auto;
  overflow-wrap: break-word;
}

.mp-label {
  font-size: 10px;
  font-weight: 600;
  opacity: 0.85;
}

.mp-value {
  max-width: 100%;
  font-size: 13px;
  font-weight: 600;
}

.mp-way {
  margin-top: 2px;
  font-size: 11px;
  font-weight: 700;
}

.mp-row.is-new {
  animation: stk-stick 0.4s ease-out;
}

/* The mystery player, once the game is over: his name in Anton underlined in gold, then his card. */
.mp-answer {
  margin-bottom: 18px;
}

.mp-answer-sub {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
}

.mp-answer-name {
  display: inline-block;
  margin: 4px 0 12px;
  padding-bottom: 4px;
  font-family: 'Anton', Impact, sans-serif;
  font-size: 30px;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border-bottom: 3px solid var(--gold);
}

.mp-answer-props {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.mp-answer-props div {
  padding: 8px 6px;
  text-align: center;
  background: var(--cover);
  color: var(--paper);
  border-bottom: 3px solid var(--gold);
}

.mp-answer-props dt {
  font-size: 11px;
  font-weight: 600;
  color: var(--sand);
}

.mp-answer-props dd {
  margin: 2px 0 0;
  font-size: 14px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.mp-note:empty {
  display: none;
}

.mp-note {
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--red-strong);
}

.mp-card .dock {
  margin-top: 16px;
}

/* Up to a small computer screen: the name on its own line, then the franchise, its conference and
   division on one line, the position, height, age and number on the next (on one line under 900 px,
   « Southwest » and « Meneur ou arrière » break). */
@media (max-width: 900px) {
  .mp-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  .mp-cells,
  .mp-answer-props {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 4px;
  }

  .mp-cell,
  .mp-answer-props div {
    grid-column: span 3;
  }

  .mp-cell--team,
  .mp-answer-prop--team {
    grid-column: span 6;
  }

  .mp-cell {
    min-height: 50px;
  }

  .mp-answer-name {
    font-size: 26px;
  }
}

@media (max-width: 360px) {
  .mp-value {
    font-size: 12px;
  }

  .mp-label,
  .mp-way,
  .mp-answer-props dt {
    font-size: 10px;
  }

  .mp-answer-props div {
    padding: 6px 2px;
  }

  .mp-answer-props dd {
    font-size: 12px;
  }
}