/* Finals page. Builds on styles.css; only what the finals add lives here. */

.finals-hero {
  min-height: 360px;
}

.finals-hero .wrap {
  position: relative;
  padding: 80px 0 60px;
}

.finals-window {
  color: var(--green);
  font-weight: 700;
}

.finals-preview {
  display: inline-block;
  margin-top: 6px;
  padding: 8px 14px;
  border: 1px solid rgba(244, 191, 79, 0.55);
  border-radius: var(--radius-small);
  background: rgba(244, 191, 79, 0.12);
  color: #f4bf4f;
}

.finals-preview[hidden] {
  display: none;
}

.finals-challenge-grid {
  grid-template-columns: minmax(0, 440px);
}

.finals-challenge-grid .challenge-card {
  min-height: 0;
}

.finals-challenge-art {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 0 20px;
}

.finals-challenge-art img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  image-rendering: pixelated;
}

.finals-reveal-link {
  margin-top: 18px;
}

.finals-reveal-link[hidden] {
  display: none;
}

.score-cell {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.score-cell > span:last-child {
  display: grid;
}