/* =========================
   Scoring/Reward System
   ========================= */

.card .score-title {
  font-weight: 700;
  margin: 0 0 var(--space-lg) 0;
  text-transform: uppercase;
}

.card .results-list {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing-unit) * 1);
}

.card .results-list .result-card {
  align-items: center;
  background-image: linear-gradient(
    330deg,
    color-mix(in srgb, var(--accent-color) 35%, var(--color-surface)),
    var(--color-surface)
  );
  border: 1px solid var(--rarity-color);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-card);
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: 0.5rem;
}

.card .results-list .result-card--unknown {
  border: 1px solid var(--gray);
}

.result-pos-badge {
  align-items: center;
  background: var(--color-background);
  border-radius: var(--radius-pill);
  display: flex;
  font-weight: 700;
  height: 2.4rem;
  justify-content: center;
  min-width: 2.4rem;
  padding: 0.1rem;
}

/* Highlight submitted riders with green position badges. */
.result-pos-badge--submitted {
  background: var(--green-dark);
}

/* Highlight owned-but-unsubmitted riders with yellow position badges. */
.result-pos-badge--owned {
  background: var(--yellow-dark);
}

.result-points {
  font-size: var(--font-base);
}

/* =========================
   Info page
   ========================= */

.duplicate-convert-title,
.info-section-label {
  color: var(--color-text-muted);
  font-size: var(--font-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}

.info-shard-grid {
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.info-shard-option {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 0;
  justify-content: center;
  line-height: 1.1;
  min-height: 52px;
  padding: var(--space-sm) var(--space-xs);
  pointer-events: none;
}

.info-shard-amount {
  color: white;
}

.info-craft-cost-box {
  align-items: center;
  background: var(--color-surface);
  border: 3px solid var(--color-border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.6rem 0.75rem;
  white-space: nowrap;
}

.info-craft-separator {
  color: var(--color-text-muted);
  font-weight: 500;
}

.craft-requirement-item {
  align-items: center;
  display: inline-flex;
  gap: 0.2rem;
}

.info-craft-amount {
  color: var(--color-text);
  font-weight: 500;
}

.info-card-note {
  font-size: 0.85rem;
}