/* Daily completion: claim a result, then choose the next move. */
#completionModal .daily-completion-panel {
  margin-top: 1.25rem;
}

#completionModal .daily-completion-stage {
  text-align: left;
}

#completionModal .daily-completion-stage h3 {
  margin: 0.35rem 0 0.4rem;
  color: #f8fafc;
  font-size: 1.25rem;
}

#completionModal .leaderboard-name-area {
  display: grid;
  gap: 0.65rem;
  margin-top: 0.9rem;
}

#completionModal .leaderboard-name-area label {
  color: #f8fafc;
  font-weight: 700;
}

#completionModal .leaderboard-name-help,
#completionModal .daily-next-prompt {
  margin: 0;
  color: #b7c2d7;
  line-height: 1.5;
}

#completionModal .leaderboard-name-area input {
  min-height: 48px;
  padding: 0 0.85rem;
  border: 1px solid rgba(185, 156, 255, 0.38);
  border-radius: 8px;
  background: #0d1730;
  color: #f8fafc;
  font: inherit;
}

#completionModal .leaderboard-name-area input:focus-visible,
#completionModal .share-btn:focus-visible,
#completionModal #dailyTryAnotherLevelBtn:focus-visible {
  outline: 3px solid #a579ff;
  outline-offset: 3px;
}

#completionModal .daily-completion-error {
  margin: 0;
  color: #f8b4b4;
  font-weight: 650;
}

#completionModal .share-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  margin-top: 1rem;
}

#completionModal .share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 46px;
  padding: 0.65rem 0.7rem;
  border: 1px solid rgba(185, 156, 255, 0.3);
  border-radius: 8px;
  background: #182441;
  color: #f8fafc;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

#completionModal .share-btn:hover {
  border-color: rgba(185, 156, 255, 0.75);
  background: #222e51;
}

#completionModal .share-btn-primary,
#completionModal #submitLeaderboardBtn,
#completionModal #dailyTryAnotherLevelBtn {
  background: #7540d8;
  border-color: #9d79f4;
  color: #fff;
}

#completionModal .share-btn-primary:hover,
#completionModal #submitLeaderboardBtn:hover,
#completionModal #dailyTryAnotherLevelBtn:hover {
  background: #8752e5;
}

#completionModal #dailyTryAnotherLevelBtn {
  width: 100%;
  margin-top: 0.9rem;
}

@media (max-width: 420px) {
  #completionModal .share-actions {
    grid-template-columns: 1fr;
  }
}